":has() - the parent selector, previous sibling selector, anywhere selector, mother of dragons, and all-round powerhouse - was crowned the most-used and most-loved CSS feature in the State of CSS 2025 report. Put simply, :has() is a pseudo-class that selects elements only when they match the relative selector list passed as its argument. It's been part of baseline support since 2023, meaning it now works seamlessly across all major browsers."
"Before :has(), styling a parent or a preceding element based on a child's state meant relying on JavaScript workarounds. With full browser support finally here, :has() lets CSS respond to DOM context directly, making state-driven styling cleaner, more declarative, and far less dependent on scripting. It's used like this: /* Select all .cards */ .card { ... } /* Select all .cards that contain an img */ .card:has(img) { ... } /* Select all .cards followed by another .card */ .card:has(+ .card) { ... } /* Select all buttons within said .cards */ .card:has(+ .card) button { ... }"
:has() is a pseudo-class that matches an element only when the relative selector list passed as its argument matches. Baseline support since 2023 enables consistent behavior across all major browsers. :has() removes many previous needs for JavaScript workarounds by allowing CSS to respond directly to DOM context. Common patterns include selecting elements that contain specific children, selecting elements followed by specific siblings, and targeting nested controls. :has() integrates with layout models such as Grid and Flexbox to let parent-level properties adapt based on child structure or state, producing cleaner and more efficient styling.
Read at LogRocket Blog
Unable to calculate read time
Collection
[
|
...
]