Is there a CSS parent selector?
Yes, you can use the :has()
CSS pseudo-class
But it has limited browser support (Currently only Chrome / Safari).
There is currently no way to select the parent of an element in CSS in a way that works across all browsers.
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 */ }
As of 2022, it is only supported by Safari, and by Chromium browsers behind a flag.
In the meantime, you'll have to resort to JavaScript if you need to select a parent element with full cross-browser support.
I don’t think you can select the parent in CSS only.
But as you already seem to have an .active
class, it would be easier to move that class to the li
(instead of the a
). That way you can access both the li
and the a
via CSS only.