:has() — CSS's Long-Awaited Parent Selector

Every other CSS selector describes a relationship in one direction: a descendant combinator selects something *inside* an ancestor, a sibling combinator selects something *after* a sibling. None of them let you select an ancestor *based on* what's inside it — that always required JavaScript to inspect the DOM and toggle a class manually.

:has() closes this gap directly. .card:has(img) reads naturally: select a .card, but only if it has an <img> inside it. The element ultimately styled is the one before :has(), not the one inside its argument — a genuinely new kind of relationship CSS selectors can now express.

The most immediately useful real-world pattern is form validation styling: form:has(:invalid) lets a form container show an error state the moment any field inside becomes invalid, with zero JavaScript. The inverse pattern, .list:not(:has(li)), detects an empty list by checking for the *absence* of any list item — useful for showing a placeholder without a script tracking list length.

:has() also composes with sibling combinators: h2:has(+ p) matches an <h2> only when immediately followed by a <p>, letting typography rules adapt based on what comes next in the document, another relationship previously impossible in pure CSS.

:has() follows the same specificity model as :is() and :not(): the pseudo-class itself contributes zero specificity on its own, but the selector(s) inside its argument list contribute their specificity, with the highest one counted. .card:has(#featured) therefore carries the specificity of an ID selector, even though .card alone would normally be much lower.

On performance, modern browser engines have invested specifically in optimizing :has(), and typical use cases (checking a handful of children) are fast. The caution applies to genuinely unbounded queries — using :has() to search deep, large subtrees on every style recalculation is measurably more expensive than a direct selector, so it's worth reserving for conditions that are genuinely relational rather than reaching for it as a default habit.

The Parent Selector CSS Never Had. For over two decades, 'style the parent of X' was the single most requested CSS feature, and the answer was always 'use JavaScript'. The :has() relational pseudo-class finally closes that gap: it matches an element if any selector passed to it matches something inside — including descendants, siblings, or even nothing at all.

Matching A Parent By Its Contents. :has() is applied to the element you want to select, and its argument describes what must exist relative to it. .card:has(img) selects a .card that contains an <img> anywhere inside it — the selector's target and its condition are on opposite ends of the relationship for the first time in CSS.

The Parent Selector. What does .card:has(img) select?

• →Every <img> element inside a .card
• →Every .card element that contains an <img> anywhere inside it
• →Every element immediately after a .card containing an img

Beyond Descendants: Siblings And Absence. :has() isn't limited to descendant checks. Combined with sibling combinators it can express 'style this element if a specific sibling follows it', and combined with :not() it can express absence — form:has(:invalid) for a form containing any invalid field, or .list:not(:has(li)) for an empty list.

Sibling And Absence Checks. What does form:has(:invalid) match?

• →Every invalid field, regardless of its form
• →The <form> element itself, if it contains at least one currently invalid field
• →Only forms where every field is valid

A Meaningful Specificity And Performance Note. :has() takes on the specificity of its most specific argument, just like :is(). Performance-wise, browsers optimize it well for common cases, but an unbounded :has(*) style query over a huge subtree is measurably more expensive than a plain selector — reserve it for genuinely relational conditions, not as a blanket replacement for simpler selectors.

:has() Specificity. How does :has() contribute to a selector's overall specificity?

• →It always contributes zero specificity, like :where()
• →It contributes the specificity of the most specific selector inside its argument
• →It always contributes a fixed, maximum specificity regardless of its argument

Relational Selection Unlocked. You can now select an element based on its descendants, siblings, or their absence — the single most-requested CSS capability for over twenty years, delivered without a single line of JavaScript. Use it deliberately for genuinely relational conditions like form validation states or content-aware layouts.

Style A Parent Based On Its Children. :has() lets a selector match a parent based on what it contains — a real 'parent selector' at last.