CSS Has Selector

ELI5 — The Vibe Check

The () selector is CSS's long-awaited 'parent selector.' You can finally style a parent based on its children — like 'style this card IF it has an image inside.' CSS developers have wanted this for 20 years. It arrived in 2023 and changed everything.

Real Talk

The CSS () relational pseudo-class selects an element based on its descendants, following siblings, or other structural relationships. It enables parent selection (styling a parent based on children), previous-sibling selection, and complex conditional styling — all without JavaScript.

Show Me The Code

/* Style card differently when it contains an image */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

/* Style label when input is invalid */
label:has(+ input:invalid) {
  color: red;
}

When You'll Hear This

":has() is the most powerful CSS selector added in the last decade" / "We replaced 50 lines of JavaScript class toggling with a single () selector"