CSS :has() Selector: Select Parent by Child
Selecting parent elements without JavaScript
Selecting a parent based on its children used to require JavaScript. :has() handles it in pure CSS, no event listeners needed.
// Watch for changes, find parentdocument.querySelectorAll('input') .forEach(input => { input.addEventListener('invalid', () => { input.closest('.form-group') .classList.add('has-error'); }); });.form-group:has(input:invalid) { border-color: red; background: #fff0f0;}has Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
No JavaScript needed
Eliminates an entire class of DOM-manipulation code. Fewer event listeners, fewer bugs.
Instant response
Browser applies styles in the rendering pipeline, no waiting for JS execution or reflow.
Composes naturally
Chain with other selectors: .nav:has(.dropdown:hover), body:has(dialog[open]).
How it works
:has() is a relational pseudo-class. When you write .card:has(img), it selects any .card that contains an img as a descendant. It's the parent selector that CSS lacked for 25 years.
You can use any selector inside :has(): pseudo-classes like :invalid, :checked, :hover, or even combinators like :has(> .direct-child). It unlocks conditional styling that previously required JavaScript.