jcuenod jcuenod - 1 year ago 98
CSS Question

Is there a CSS parent selector?

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 this:

li < a.active {
property: value;
}


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.

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)

Any ideas?

Answer Source

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in either of the current CSS selectors specs:

In the meantime, you'll have to resort to JavaScript if you need to select a parent element.


The Selectors Level 4 Working Draft includes a :has() pseudo-class that works the same as the jQuery implementation. As of 2016, this is not available in any browser.

Using :has() the original question could be solved with this:

li:has(> a.active) { /* styles to apply to the li tag */ }