has: a new CSS selector

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 <div>s but only when they contain a <p>.

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

Now, when a <div> contains a <p>, 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.