:has() Relational Pseudo-class

The :has() pseudo-class selects an element if it contains a descendant matching the argument. Often called the "parent selector," it enables styling a parent element based on its children — a capability CSS never had before.

.card:has(img) selects any .card element that contains an img descendant. The argument is a relative selector list — any valid CSS selector describing elements relative to the subject element.

Style a form container when it has an invalid input: form:has(:invalid) { border-color: red; }. Style a section that contains a heading: section:has(h2) { padding-top: 2rem; }. The parent changes appearance based on child state.

:has() can select preceding siblings — something + and ~ cannot do. h2:has(+ p) selects h2 elements immediately followed by p. li:has(~ .active) selects li elements that have a subsequent .active sibling.

React to native form validity without JavaScript: input:has(~ .error-msg) styles an input with a sibling error message. label:has(+ input:required) styles labels whose paired input is required — all from CSS alone.

Highlight navigation containers based on active child: nav:has(.active) applies styles to the entire nav when any child has the active class. Useful for indicating which navigation section is current at the container level.

.grid:has(.card:focus-within) styles the entire grid when any card receives keyboard focus. .dropdown:has(:hover) keeps a dropdown open while hovering any descendant — cleaner than complex sibling combinator chains.

.sidebar:has(nav) applied different layout than .sidebar:not(:has(nav)). Conditional layout without JavaScript: the presence or absence of specific children drives the parent's layout — enabling truly adaptive, content-aware CSS.

:has() with broad argument selectors (e.g., :has(*)) can be expensive — the browser must check every element. Keep :has() arguments specific. Prefer :has(> .specific-child) (direct child) over :has(.specific-child) (any descendant) when possible.

:has() is supported in Chrome 105+, Safari 15.4+, Firefox 121+. Full baseline support since late 2023. No polyfill exists (it would require JavaScript to simulate) — use it with progressive enhancement for older browsers where the feature is non-critical.

Patterns previously requiring JS event listeners: "add class to parent when child is focused," "show overlay when modal-trigger exists," "style a grid differently when it has exactly three items." :has() handles all of these declaratively.

What makes :has() unique compared to existing CSS combinators like + and ~?

:has() is CSS's first true relational pseudo-class that enables parent and preceding-sibling selection. It powers content-driven styling, form state reactions, navigation highlighting, and many patterns that previously required JavaScript DOM manipulation — all declaratively in CSS.