EXPAND `:has()` to include support for more pseudo-classes

jensimmons commented 11 months ago

Description

:has() is amazing. Developers are thrilled.

Some of the most interesting usecases are when you put another pseudo-class inside of :has(). For example, :has(:playing) targets an element if there's a video or audio element playing inside of it. :has(:user-invalid) targets an element if there's a form field inside of it that's in an invalid state — making it very easy, for example, to create a red border on a text label when its field is not filled out correctly.

It would be great to see if we can get support for all of the pseudo-class (except, of course, for the ones that are disallowed in the standard).

I started a spreadsheet to try and list what's currently supported where: https://docs.google.com/spreadsheets/d/1NZeNiJqOEiphHJiAIB9iWsp2yxsn8fsqAJj1syM6K10/edit?usp=sharing

It needs work, but the list of the pseudo-classes alone are helpful.

Specification

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

Open Issues

No response

Tests

No response

Current Implementations

[X] Blink
[X] Gecko
[X] WebKit

Standards Positions

No response

Browser bug reports

No response

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

dbaron commented 11 months ago

Are there particular examples of pseudo-classes where:

an engine supports :has(),
an engine supports the pseudo-class,
the pseudo-class isn't forbidden by the spec from matching inside of :has(), and
the engine doesn't support the pseudo-class inside of :has()?

(I just tested :hover and :checked inside of :has() in Chrome Canary, and they worked fine.)

nt1m commented 11 months ago

@dbaron Matching works fine in most browsers, it's mostly invalidation that needs work, although both Chrome & WebKit have made progress in that area over the past year.

foolip commented 11 months ago

A list of tests will be need to evaluate the work required for this proposal, as it's not clear if there are things that don't work in Chrome here, beyond pseudo-classes that aren't supported at all yet.

bennypowers commented 11 months ago

Does this include :host(:has())?

jgraham commented 7 months ago

Thank you for proposing EXPAND :has() to include support for more pseudo-classes for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

We could not find any tests for EXPAND :has() to include support for more pseudo-classes in the Web Platform Tests. Such tests are crucial for measuring interoperability status and progress. Once there are WPT entries covering this proposal, we welcome it being resubmitted for a future round of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.

web-platform-tests / interop