CSS :has(): Browser Support, Features, Limitations

What is CSS :has()?

CSS :has() is a relational pseudo-class defined in the CSS Selectors Level 4 specification from the W3C. It accepts a relative selector list as its argument and matches the anchor element when any of those selectors find at least one matching child or sibling. It is the first true parent selector in CSS.

Which browsers does CSS :has() support?

CSS :has() works in every modern desktop and mobile browser. Chrome 105, Edge 105, Firefox 121, Safari 15.4 on macOS and iOS, Opera 91, and Samsung Internet 20 all enable it by default, while Internet Explorer never received support.

What are the key features of CSS :has()?

CSS :has() opens up DOM-aware styling that previously needed JavaScript. The selector keeps a small surface area but unlocks several patterns CSS could never express on its own.

• First true parent selector: :has() lets a parent style itself based on its children, which CSS has lacked since the language shipped. The rule figure:has(figcaption) styles only figures that ship a caption.
• Relative selector list as input: :has() accepts any combinator after the anchor: descendant, child (>), next sibling (+), or general sibling (~). For example, h1:has(+ p) styles an h1 only when a paragraph follows it directly.
• Logical AND and OR: Multiple :has() chains form an AND. A comma-separated list inside one :has() forms an OR. The rule body:has(video):has(audio) requires both, while body:has(video, audio) matches either.
• Form state styling without JS: Pair :has() with :checked, :invalid, or :focus-within to style ancestors based on the state of inputs nested inside them. The rule form:has(:invalid) highlights an entire form whenever any field is invalid.
• Predictable specificity: :has() takes the highest specificity of any selector inside its parens. The pseudo-class itself adds nothing; the inner selectors decide weight, which keeps cascade behavior easy to reason about.

How do you check if a browser supports CSS :has()?

The cleanest check is the @supports at-rule with a selector() condition. Wrap the :has() rules so the browser only applies them when the engine recognizes the selector. Pair it with @supports not to ship a fallback for older browsers.

/* Feature-detect :has() before applying it. The block runs only when the
   browser parses :has(); older browsers skip it and use the fallback below. */
@supports selector(:has(*)) {
    .card:has(img) {
        padding: 1rem;
        border: 1px solid #ddd;
    }

    form:has(:invalid) {
        outline: 2px solid red;
    }
}

/* Fallback for browsers without :has() support. */
@supports not selector(:has(*)) {
    .card {
        padding: 1rem;
    }
}

For runtime checks, the CSS.supports JavaScript API parses the same selector string. Paste this snippet into the DevTools console of any browser to see whether the engine recognizes :has().

// Run in any browser DevTools console to check :has() support at runtime.
// CSS.supports parses the selector string and returns true when the engine
// recognizes it.

const supportsHas = CSS.supports('selector(:has(*))');
console.log(`:has() supported in this browser: ${supportsHas}`);

// Logs true on Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+,
// Opera 91+, and Samsung Internet 20+. Logs false everywhere else.

If CSS.supports returns false, the browser silently ignores any rule that contains :has(). Use the @supports not block above to set a baseline style for those users instead of leaving the layout broken.

What are the known issues with CSS :has()?

CSS :has() is now Baseline 2023, but the way browsers parse and resolve it still has rough edges that hit production sites. Plan around these before you replace JavaScript-driven class toggling with :has().

• Forgiving relative list, unforgiving rule: :has() takes a forgiving relative selector list, so an unknown selector inside it does not invalidate the whole rule. But a :has() rule itself fails in browsers that do not parse :has(), which can invalidate adjacent rules in the same stylesheet. Always wrap :has() rules in @supports.
• No nesting :has() inside :has(): The spec forbids the pattern :has(:has(...)), and every browser rejects it. Use a comma-separated list or a sibling combinator inside the same :has() instead.
• Pseudo-element restrictions: :has() cannot wrap ::before, ::after, or other pseudo-elements as its argument. The matcher operates on real DOM nodes, not on generated content.
• Performance on broad anchors: Anchoring :has() to body, :root, or * forces the engine to re-evaluate on every DOM mutation in the entire document. Anchor :has() to the smallest container that owns the children you actually need to inspect.
• Long-tail Firefox traffic: Firefox 103 to 120 ship :has() behind the layout.css.has-selector.enabled preference, so a slice of long-tail Firefox users still cannot use :has() without flipping the flag. Server-side analytics on the user agent string should still expect Firefox traffic on 120 and below.

In my experience, the silent failure mode that bites teams the most is forgetting the @supports wrapper: a :has() rule outside an @supports block can break the cascade on Internet Explorer and on stale Android WebView builds. Always feature-detect before shipping :has() to a multi-browser audience.

Citations

All CSS :has() version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Selectors Level 4 (relational pseudo-class): w3.org/TR/selectors-4/#relational
• MDN :has() pseudo-class: developer.mozilla.org/en-US/docs/Web/CSS/:has
• MDN @supports at-rule: developer.mozilla.org/en-US/docs/Web/CSS/@supports
• MDN CSS.supports() static method: developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static
• WebKit blog, Using :has() as a CSS Parent Selector: webkit.org/blog/13096/css-has-pseudo-class
• Chrome for Developers, :has(): the family selector: developer.chrome.com/blog/has-m105
• Mozilla Firefox 121 release notes: firefox.com/en-US/firefox/121.0/releasenotes
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets