Description

The :has() pseudo-class fulfills the decades-long desire for a "parent selector", while adding even more power to CSS.

:has( ) allows other selectors as arguments, including :pseudo-classes. Exactly which :pseudo-classes are supported is likely not yet 100% interoperable. As of the writing of this article, for example, Safari supports: :nth-child, :nth-last-child, :first-child, :last-child, :only-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :modal, :target. And does not yet support dynamic media pseudo-classes like :playing, :paused, :muted, etc. It would be useful to align browsers on which :pseudo-classes are supported.

Pseudo-elements should not be allowed inside :has(). And there are other disallowed things, including :has() — you cannot create :has(:has()). Making sure browsers are interoperable on what they disallow is also useful for web developers.

There is no part of the definition of :has() that should not be included in Interop 2023.

Rationale

Listed as number two in 2021 State of CSS

Specification

https://drafts.csswg.org/selectors-4/#relational

Tests

Existing tests:

• has-argument-with-explicit-scope.html
• has-basic.html
• has-error-recovery.html
• has-matches-to-uninserted-elements.html
• has-relative-argument.html
• has-specificity.html
• has-visited.htm

More tests may be needed, including for invalidation.