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?
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:
That said, the Selectors Level 4 Working Draft includes a :has()
pseudo-class that will provide this capability. It will be similar to the jQuery implementation.
li:has(> a.active) { /* styles to apply to the li tag */ }
However, as of 2020, this is still not supported by any browser.
In the meantime, you'll have to resort to JavaScript if you need to select a parent element.