:has()

The CSS relational pseudo-class — .card:has(img), label:has(+ input:invalid), form:has(:focus-visible) — that selects an element by what it contains or what follows it; the “parent selector” CSS never had, and a way to style by state without a class that JavaScript would have had to add

This site uses it for the index entry’s focus ring: .content-list-entry:has(a:focus-visible) outlines the whole row when its stretched link is focused, which no ancestor selector could do before. The pattern generalizes — a fieldset with an invalid input, a card with an image versus one without, a nav item that contains the active link — and each one used to be a class toggled by script. Baseline since 2023. It is not free: the browser has to re-check an ancestor when descendants change, so :has() on a huge subtree with frequent mutation is the one place to think twice.