0 votes
1 view
in Web Technology by (31.7k points)

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?

1 Answer

0 votes
by (75.1k points)

Currently, there is no way to select the parent of an element in CSS. But if there was a way to do it, it would be in either of the current CSS selectors specs:

  • Selectors Level 3 Spec

  • CSS 2.1 Selectors Spec

If you want to select a parent element then you will have to resort to JavaScript.

In the Selectors Level 4 Working draft, there is a method :has() which is 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) { 

}

...