The CSS :has selector helps you select elements that contain elements that match the selector you pass into the :has() function.
It can be basically described as a "parent" selector (although it has more power than just this).
For example, you can select all
s but only when they contain a
.
div:has(p) {
background: red;
}Now, when a
contains a
, its background will be red.
This is a major change is CSS, because there was no way to go back up in the tree before the :has() selector. It may have good reasons, as explained in this post, essentially for performance concerns.
Be careful though, it is only supported in Safari and Chrome browsers for now.
