Technical1 min read
Parent Styling with the CSS :has() Selector
The long-awaited parent selector is finally here: Style parent cards dynamically with zero JavaScript.
For over a decade, styling a container based on the state of its descendants required wiring up React state, useEffect, or class togglers. :has() brings this power natively to CSS.
Practical Example: Elevate Card on Input Focus
CSS
/* If any nested input is focused, highlight the entire card container */
.card:has(input:focus) {
border-color: var(--accent);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
Contextual Layouts for Cards with Images
CSS
/* Collapse top padding only if card contains a hero image */
.card:has(.card-image) {
padding-top: 0;
}
Components remain declarative, performant, and completely free of state synchronization bugs.