Results 1 to 3 of 3

Thread: Need help with advanced CSS selectors

  1. #1
    Join Date
    Jun 2009
    Location
    Laputa
    Posts
    43
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Need help with advanced CSS selectors

    I'm working on a CSS dropdown menu based on son of suckerfish. I would like to know if there is a CSS selector to select elements directly before a given element. To give an example:

    HTML Code:
    <li><a href="#">1.1</a></li>
    <li>
       <a href="#">1</a>
       <ul>
           <li><a href="#">1.1</a></li>
       </ul>
    </li>
    I want to select all links that are before <ul> tags.

    I know that I can use "li a+ul {}" to select all ul tags in list items that immediately follow a tags, but How can I select a tags before ul tags?

    Without javascript.
    Last edited by C55inator; 06-29-2009 at 06:07 PM.

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    apply a rule for all list-item anchors, then apply a different rule for unordered lists that are siblings of the anchor

    Code:
    li a {}
    li a + ul {}
    HTML Code:
    <li><a href=""></a></li>
    <li>
        <ul>
              <li><a href=""></a></li>
        </ul>
    </li>

  3. #3
    Join Date
    Jun 2009
    Location
    Laputa
    Posts
    43
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thank you for trying, but that still only gives me a rule for the unordered lists and a rule for all of the anchors.

    I found a CSS 3 selector that is just what I'm looking for. a ~ ul {} is what I want, however, this will only work in modern browsers. Most people are using IE 6 or 7, so I'm either going to have to come up with a strange combination of selectors, write a .js hack, or give up and use class selectors.

    I'm just going to give up on supporting old browsers, as this isn't a "Key" section.

    The CSS 3 selectors are incredibly useful, by the way.
    Here's the w3c page

    Thanks a lot.

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
  •