Does parent selector exist 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 {
    property: value;
}

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

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'd rather not do that).

Answer 1

You can use :has() CSS pseudo-class

But it has limited browser support (Firefox is not supported yet).

Answer 2

Currently there is no way in CSS to select an element's parent element so that it works correctly in all browsers.

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

li:has(> a.active) { /* 应用于li标签的样式 */ }

Currently only Firefox does not support this feature by default.

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