$2.81

Is there a CSS parent selector?

Ask a question+
0

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).

Any ideas?

add comment

1 Answer

0

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:

https://www.w3.org/TR/selectors-3/#selectors
https://www.w3.org/TR/CSS2/selector.html#pattern-matching
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 2019, this is still not supported by any browser.

Using :has() the original question could be solved with this:

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

Azniv Saroyan 150
add comment

Your Answer