Question

Is there a way to select a parent element based on the class of a child element in the class? The example that is relevant to me relating to HTML output by a nice menu plugin for http://drupal.org. The output renders like this:

<ul class='menu'>       <li>           <a class='active'>Active Page</a>       </li>       <li>             <a>Some Other Page</a>       </li>   </ul>   

My question is whether or not it is possible to apply a style to the list item that contains the anchor with the active class on it. Obviously, I’d prefer that the list item be marked as active, but I don’t have control of the code that gets produced. I could perform this sort of thing using javascript (JQuery springs to mind), but I was wondering if there is a way to do this using CSS selectors.

Just to be clear, I want to apply a style to the list item, not the anchor.

Answer 1

You can use has():

li:has(a:active) {   /* ... */ } 

---

Unfortunately, there’s no way to do that with CSS.

It’s not very difficult with JavaScript though:

// JavaScript code: document.getElementsByClassName("active")[0].parentNode;  // jQuery code: $('.active').parent().get(0); // This would be the <a>'s parent <li>.