CSS :has() Selector: 10 Practical Examples You Can Click and Edit

CSS :has() Selector: 10 Practical Examples You Can Click and Edit

:has() is the CSS feature people spent a decade calling impossible: a parent selector . Before it, CSS could style a descendant based on its ancestor, but never the other way round — there was no way to say "style this <div> differently because a specific child is present inside it." :has() closes that gap, and it does more than the "parent selector" nickname suggests: it's a general relational selector that can look at children, siblings, and combinations of conditions, then style the element it's attached to based on what it finds. The 10 demos below are all real, clickable UI patterns — a selectable card, a validated form field, a table row that reacts to its own status cell, a CSS-only dropdown menu. Nothing here is decorative; every one is copy-paste-ready for an actual project. Every embed also has a Fork & Edit button that opens the exact snippet, already running, in My Code — FWD Tools' free in-browser editor. Rename a class, delete a lin…