:has()

Speaking of powerful, dynamic features, the :has() selector is one of the most powerful new CSS capabilities landing in modern browsers. With :has(), you can apply styles by checking to see if a parent element contains the presence of specific children, or if those children are in a specific state. This means, we essentially now have a parent selector.

Building on the container query example, you can use :has() to make the components even more dynamic. In it, an item with a "star" element gets a gray background applied to it, and an item with a checked checkbox a blue background.

// HTML
<div class="everybody">
  <div>
    <div class="a-good-time"></div>
  </div>
</div>

<div class="everybody"></div>

// CSS
.everybody:has(.a-good-time) {
  animation: party 21600s forwards;
}

<target>:has(<condition>) { <styles> }

// Examples
// Select figure elements that have a direct figcaption.
figure:has(> figcaption) { ... }

// Select anchors that don’t have a direct SVG descendant
a:not(:has(> svg)) { ... }

// Select labels that have a direct input sibling. Going sideways!
label:has(+ input) { … }

// Select articles where a descendant img doesn’t have alt text
article:has(img:not([alt])) { … }

// Select the documentElement where some state is present in the DOM
:root:has(.menu-toggle[aria-pressed=”true”]) { … }

// Select the layout container with an odd number of children
.container:has(> .container__item:last-of-type:nth-of-type(odd)) { ... }

// Select all items in a grid that are not hovered
.grid:has(.grid__item:hover) .grid__item:not(:hover) { ... }

// Select the container that contains a custom element <todo-list>
main:has(todo-list) { ... }

// Select every solo a within a paragraph that has a direct sibling hr element
p:has(+ hr) a:only-child { … }

// Select an article where multiple conditions are met
article:has(>h1):has(>h2) { … }

// Mix that up. Select an article where a title is followed by a subtitle
article:has(> h1 + h2) { … }

// Select the :root when interactive states are triggered
:root:has(a:hover) { … }

// Select the paragraph that follows a figure that doesn’t have a figcaption
figure:not(:has(figcaption)) + p { … }

https://developer.chrome.com/blog/has-m105/