Styling a parent based on its children required a class toggled by script, which meant a render, a layout and a class name in two places.
/* a form field that has an invalid input */
.field:has(input:user-invalid) { border-color: var(--danger); }
/* a card that contains an image, laid out differently */
.card:has(> img) { grid-template-rows: auto 1fr; }
/* and the one that removed the most code: a menu open state
driven by a checked input rather than a class */
.menu:has(#toggle:checked) { transform: none; }Three script blocks deleted, and the styling is now declarative rather than a synchronisation between two systems. The performance warnings around it are worth taking seriously in one specific case — a selector matching on a distant descendant of a frequently-mutated subtree — and are not a reason to avoid it for form state, which is where it is most useful.