CSS parent selector

Question

I would like to select the <li> element that is a parent (which immediately precedes the anchor tag, if that helps...) according to some attribute of the anchor tag.

i.e. my css would be something like

li < a.active {
    attribute: setting;
}

Obviously there are ways of doing this with javascript but I'm hoping that there is some sort of workaround that exists native to CSS 2

Any ideas?

[Edit:] The menu that I am trying to style is being spewed out by a cms so I can't move the active tag to the li element... (unless I theme the menu creation module which I'd rather not do)

Answer 1

there isn't a way to do this in css2. you could add the class to the li and reference the a

li.active > a {
    attribute: setting;
}

Answer 2

I've certainly come across instances when it would be handy, but unfortunately parent selectors do not exist in CSS.

Can you explain more about what you're trying to achieve? There might be another way in to a solution, e.g. move the style to the li, then disable it in a.active or via a child selector.

Answer 3

I don´t think you can select the parent in css only.

But as you already seem to have an .active class, wouldn´t it be easier to move that class to the li (instead of the a)? That way you can access both the li and the a via css only.

Answer 4

Not in CSS 2 as far as I'm aware. CSS 3 has more robust selectors but is not consistently implemented across all browsers. Even with the improved selectors, I don't believe it will accomplish exactly what you've specified in your example.

Answer 5

There definitely is no way to select the parent of an element in CSS (even CSS3).

If there was a way to do it, it would be in the CSS selectors specs, either CSS 2 or 3

• CSS 3 Selectors Spec
• CSS 2 Selectors Spec

You'll have to resort to JavaScript if you need to select a parent element.

If CSS did have a "parent" selector, I would imagine it would work somewhat like jQuery's :has() selector. If anyone knows of a way to submit ideas to the W3C for the next version of CSS, this would be a thing to include.

Answer 6

In CSS 2 you can target parent elements sort of..

so if you hover a 2nd tier menu item:

ul#css-menu li:hover a.top-tier-link {}

and a 3rd tier menu item:

ul#css-menu li ul li:hover a.second-tier-link {}

these rules will change the appearance of the immediate parent Only when the nested element is active.

By using the :hover psudeo class as part of the selection you can apply different styles that only appear when the menu is active. I have this working at http://markthedev.com/projects/css-menu-example

The above will work in IE 6 etc.. If you don't care about IE 6 you can simplify it further just by doing:

ul#css-menu li:hover > a

ul#css-menu li ul li:hover > a

ul#css-menu li ul li ul li:hover > a

Then you don't need the additional classes. Hope this makes sense.

I hope this makes sense.

Answer 7

As mentioned by a couple of others, there isn't a way to style node parents using CSS 2 or 3. The easiest in your case may just be to use jQuery:

$("li < a.active").css("attribute", "setting");

HTH

Answer 8

Sitellite, a fairly awesome open source CMS we use, has a .parent selector in built, very handy. And it doesn't rely on javascript.