:has() pseudo-class

[jensimmons]

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.

[lilles]

There's a massive amount of invalidation tests for :has() in https://wpt.fyi/results/css/selectors/invalidation

[jensimmons]

It would be great to help update the MDN BDC data for :has(), so pseudo-class support is enumerated for each possibility, like :has(:target). That will help web developers know what works where, and avoid confusing bugs.

[foolip]

It would be great to help update the MDN BDC data for :has(), so pseudo-class support is enumerated for each possibility, like :has(:target). That will help web developers know what works where, and avoid confusing bugs.

@jensimmons can you file an issue at https://github.com/mdn/browser-compat-data/issues? That sounds valuable, but I think some guidance is needed to get it right. In particular, what the distinct possibilities are, is :target special or is it all pseudo-classes, and so on...

[jensimmons]

@foolip Good idea. Done: mdn/browser-compat-data#17818

:target is not special. It's just top of mind.

[Westbrook]

Support :host(:has(...))!!!

[foolip]

Adding to the rationale, :has() was one of the most common responses the State of CSS 2022 question about browser incompatibilities, mentioned in ~19% of responses, see #248.

[foolip]

Thank you for proposing :has() for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as the :has() focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.