SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stumped - rule for parent element?

    here's the HTML:

    HTML Code:
    <li><a href="page.html" title="super page description">Link</a></li>
    Is there a way to apply a CSS rule to only the LI that have an a in them?

    If I do this:
    HTML Code:
    li a {
    /* css styles */
    }
    Then it applies to the actual anchors - not the list items. I want to apply style to the li tag; not the a

    TIA,

    Jon
    var me = null;

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    No there isn't.

    You will either have to give a class to the LIs or give the container (UL or OL) class/id.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Logic_earth said there is no way to do this in css yet although it has been talked about for a while.

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    semi-solved

    Here's a way that I implemented the 'rule' - although it's kind of ugly.

    Using the prototype javascript library, I pulled all the li within a specific ul, then applied a css class to each li containing an anchor:

    HTML Code:
    <ul id="ul_id">
      <li>No Link</li>
      <li><a href="#">Link</a></li>
      <li>No link</li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    Code:
    $A($('ul_id').getElementsByTagName('li')).each(function(elem) {
        var b = elem.down();
        if (b !== null && b.tagName == "A") {
          elem.addClassName('className');
        }
    });
    I attach that to the page's onload event and it appears to work OK - though it feels 'hackish' - plus it creates a javascript dependency for the style.

    *sigh* - gotta love CSS
    var me = null;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •