Log in

View Full Version : Resolved Need help with advanced CSS selectors



C55inator
06-28-2009, 04:56 PM
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:



<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.

boogyman
06-29-2009, 02:59 AM
apply a rule for all list-item anchors, then apply a different rule for unordered lists that are siblings of the anchor



li a {}
li a + ul {}




<li><a href=""></a></li>
<li>
<ul>
<li><a href=""></a></li>
</ul>
</li>

C55inator
06-29-2009, 05:04 PM
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 (http://www.w3.org/TR/css3-selectors/#general-sibling-combinators)

Thanks a lot.