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).
The W3C's Selectors Level 4 Working Draft includes a :has() pseudo-class that provides this capability, among others:
li:has(> a.active) { /* styles to apply to the li tag */ }
All major browsers support this selector. Refer to https://caniuse.com/css-has to check if your target browser or browser versions have support for it.
You may need to resort to using JavaScript if your target browser does not fully support this feature.