Red Pixel Yellow Pixel | Bespoke development, Digital Design

it would be great to have something that works in a way coherent with javascript el.parenteElement.parenteElement... like a:active:parent:parent or even a::active::parent::parent
li:has(> a.active) {
/* styles to apply to the li tag */

/* Selectors Level 4 Working Draft includes a :has() */

}
Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

In CSS, there’s no direct way to select a parent element based on its child’s state or properties. This is a long-standing limitation in CSS. The :has() pseudo-class you’ve mentioned is from the Selectors Level 4 specification, and it would allow for selecting an element if it contains a certain element. However, as of my last update in September 2021, it’s not implemented in any major browsers due to performance concerns.

Your idea of using something like a:active:parent:parent or a::active::parent::parent is intriguing. It could offer a more intuitive way to style ancestor elements based on descendant states or properties. However, this is not part of the CSS specifications at present, and there might be performance and complexity concerns that could arise from such a syntax.

That said, in JavaScript (with or without jQuery), you can easily navigate and manipulate the DOM hierarchy using properties like parentElement. But for pure CSS solutions, we’re currently limited.

If you’re looking to style a parent element when an anchor (<a>) inside it is active, the best approach right now would involve some JavaScript:

javascript
document.querySelectorAll('a').forEach(anchor => {
anchor.addEventListener('focus', function() {
this.parentElement.parentElement.classList.add('active-parent');
});

anchor.addEventListener('blur', function() {
this.parentElement.parentElement.classList.remove('active-parent');
});
});

With the above script, when an anchor is focused (active state), its grandparent will receive the active-parent class. You can then style the grandparent using:

css
.active-parent {
/* Your styles here */
}

This solution does involve JavaScript, but it’s currently the most effective way to accomplish this behavior. If future versions of CSS or browser updates provide new features to make this easier, those would certainly be welcomed by developers!