Unresolved Cross-Browser Behavior of CSS ':has()' with ':not()' and ':is()' Combinators

Goal

Determine how browsers evaluate complex ':has()' selectors that include ':not()' or ':is()' combinators, and identify any inconsistencies that affect production layouts.

Constraints

The CSS Selectors Level 4 specification permits ':has()' to appear in any selector context, but implementations differ when the selector chain is nested or combined with negation and set‑based pseudo‑classes. Current engines (Chrome, Edge, Safari) show divergent parsing for patterns like ‘div:has(:not(.foo))’ or ‘section:is(.bar) > :has(.baz)’. Firefox remains without a stable implementation, creating a compatibility gap. Performance concerns arise when these selectors target large or deeply nested DOM trees, potentially triggering layout thrashing.

Unresolved Questions

Which browsers consistently support complex ':has()' selectors when combined with ':not()' or ':is()'? Does the spec allow any variance in interpretation for such combinations? How can developers reliably detect and fallback for inconsistent implementations without breaking layout?