CSSworkingbaseline-2023

The :has() selector

CSS gets a parent selector.

For two decades CSS could only descend. :has() finally lets a parent style itself based on what's inside it — or anywhere downstream.

Highlight the row containing a checked box

HTML+CSS+JSintro
Press Run to execute

Only the "Slice ginger" row renders highlighted — amber border, amber text, struck through — because its box is checked and li:has(input:checked) reaches back up from the input to style the whole li. Toggle any other box and that row lights up too, proving the parent reacts to a descendant's state with no JavaScript.