The :has() pseudo class has been around for a short while, since at least early 2022. However, as of December 19th 2023, it now has support across all of the major browsers! 

This amazing little pseudo-class allows us to style the parent element dependent on the children it has. In the past you could only achieve this via usage of JavaScript, meaning we can now also delete a lot of JavaScript!

We can call it off of any element we desire, so for example:

<section class="SomeElement">
    <h1>Hello World</h1>
</section>

<section class="SomeElement">
    <p>dictum varius duis at consectetur lorem donec massa sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit</p>
</section>

.SomeElement:has(h1) {
    padding: 30px;
    background: yellow;
    text-align: center;
}

These styles would only apply to our first Section element, as that's the only one that has a h1 element inside of it.

What if we wanted it to apply if we had multiple elements inside? We can simply chain them with the + operator.

.SomeElement:has(h1 + p) {
    padding: 30px;
    background: yellow;
    text-align: center;
}

Now our styling only takes effect to elements that have both a h1, and a paragraph inside.

We can insert any selector we desire into here, so we could use class names, ids, input related selectors etc.

nav:has(input:checked) > .nav-container {
  display: flex;
}

This simply checks if there's a checkbox that is checked inside of our nav element we then set the class nav-container to display of flex.

Pretty cool stuff, huh?

If you want to see all of this in action, check out the codepen.