Question

How to select parent element in CSS?

I’m trying to select a parent element in my CSS but can’t seem to find a straightforward way to do it. I know CSS is typically more focused on selecting children or descendants, but is there a way to target a parent element directly? Are there any new features or workarounds (like using :has()) that make this possible? Any insights or examples would be really helpful!

Answer 1

The :has() pseudo-class, a proposed CSS selector, acts like a parent selector. It enables you to style a parent element based on the presence of a specific child element, a feature that was previously difficult to achieve with pure CSS. This offers significant potential for more efficient and dynamic styling.

Example:

nav:has(ul.active) {

  color: gray;

}

In this case, if the nav element contains a ul with the class active, the color of the navbar will change to gray.