jcuenod jcuenod - 5 months ago 25
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

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 */ }
Comments