Selectors

Practical Conditional Styling with the CSS :has() Selector

CSS traditionally selects an element from information about that element or its ancestors. The :has() relational pseudo-class adds a different capability: an element can match according to relative selectors evaluated from that element. This makes many parent-aware and sibling-aware styles possible without adding state classes solely for presentation. The useful mental model is not “select the parent,” but “select this element if a related element matches a condition.” Read :has() from the outside in Consider a card that should use a different layout when it contains a direct image child: