Is there a CSS parent selector?

Question

How do I select a

element that is the direct parent of an anchor element?

For example, my CSS would look like this:

li < a.active {
    property: value;
}

Obviously there are ways to do this using JavaScript, but I'm hoping there's some kind of workaround for CSS Level 2 itself.

The menu I'm trying to style is spewed out by the CMS, so I can't move the active element to the

element. .. (unless I theme the menu and create a module, which I don't want to do).

Answer 1

You can use :has() CSS pseudo-class

But it has limited browser support (currently not supported by Firefox).

Answer 2

There is currently no way to select the parent element of an element in CSS in a way that works in all browsers.

Selector Level 4 Working Draft Includes :has() Pseudo class that will provide this functionality. It would be similar to the jQuery implementation, but is currently not supported by Firefox.

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

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

Meanwhile, if you need to select a parent element with full cross-browser support, you'll have to resort to JavaScript in Firefox.