The :has() CSS pseudo-class selects elements that contain other elements that match the selector passed in its arguments. It is often referred to as the «parent selector» because of its ability to select a parent element based on the child elements it contains and apply styles to the parent.
/* Select the .card element when it
contains a

immediately
followed by a paragraph. */
.card:has(figure + p) {
flex direction: row;
}

This example selects an element with class .card if it contains a

element immediately followed by a

element:

This is incredibly useful when styling components that may or may not contain certain elements inside, such as a grid of cards where a card element always has a paragraph but may not have an accompanying image.
Image or no image? That is the question.

Thus, in situations where you don’t always know what the markup includes, you can still write styles that meet those conditions.

:has() is defined in the Selectors Level 4 specification, where it is described as «the relational pseudo-class» because of its ability to match selectors based on an element’s relation to other elements.
Basic usage

The following HTML contains two

Let’s say you only want to style the