Is there a CSS parent selector?

Issue

How do I select the <li> element that is a direct parent of the anchor element?

As an example, 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 Level 2.

The menu that I am trying to style is being spewed out by a CMS, so I can't move the active element to the <li> element... (unless I theme the menu creation module which I'd rather not do).

Solution

Update November 2023 Firefox v120+ users can now opt-in to using the :has()pesudo class.

Update October 2023 there is no way to select the parent of an element in CSS in a way that works across all major browsers.

---

The Selectors Level 4 Working Draft specifies a :has() pseudo-class that provides this capability, among others:

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

Reference https://caniuse.com/css-has to check if your target browsers have support.

---

You may need to resort to using JavaScript until all browsers fully support this feature.

Answered By - Dan Herbert