Is there a parent selector in CSS?

Question

How do I select the

element that is the direct parent of the anchor element?

For example, my CSS might look like this:

li < a.active {
    Attribute: value;
}

Obviously, it is possible to achieve this using JavaScript, but I was hoping for a CSS Level 2 native workaround.

The menu I'm trying to style is generated by a CMS, so I can't move the active element into the

element... (unless I theme the menu creation module, but I don't want to do that).

Answer 1

You can use :has() CSS pseudo-class

But its browser support is limited (currently not supported by Firefox).

Answer 2

Currently there is no way in CSS to select the parent of an element in all browsers.

Selectors Level 4 Working DraftIncludes a :has()pseudo-class that will provide this capability. It would be similar to jQuery's implementation, but is currently not supported by Firefox.

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

Firefox is the only major browser that currently does not support it by default.

In the meantime, if you need to select a parent element with full cross-browser support, you will have to use JavaScript in Firefox.