Andrew's Digital Garden

:has selector

:has is the closest thing CSS has to a parent selector. It allows you to style 'up', rather than 'down', as the styles written don't apply to the selector but rather the parent element. The selector inside of the :has() almost acts entirely as a conditional, with the prefixed selector receiving the styles, which is unlike how CSS usually works.

<selector to get styled>:has(<condition to match>)

Effectively, you can target an element at any level of the DOM tree based on state anywhere else in the DOM tree. This frees you to structure the DOM as needed, rather than matching it to get the CSS selectors required.

The following snippet applies styling to the div only if it contains a p inside of it.

div:has(p) { background: red; }

The following snippet applies styling to the a only if it has a direct descendent img

a:has(> img) { border: 20px solid white; }

As of now, this is not supported in any browser, although it's part of the same spec as :is and :not.

For some inspiration, this can be helpful for forms for selecting a label that is either a sibling of an input, or a parent of an input. Since it also accepts relative selectors, you can style elements based on what follows it. e.g. style an image differently when there is a caption below it figure img:has(+ figcaption).

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

[[css]]

:has selector