Carryover evaluation: CSS :has() pseudo-class

[mayank99]

Description

MDN description:

The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.

Example:

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) {
  margin-bottom: 0;
}

Specification

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

Open Issues

No response

Tests

https://wpt.fyi/results/css/selectors?q=has

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

https://bugzilla.mozilla.org/show_bug.cgi?id=418039

Developer discussions

No response

Polls & Surveys

https://2023.stateofcss.com/en-US/features/other-features#has_selector

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

We still have a few months left in 2023 so there's a chance this might get implemented in Gecko, in which case this doesn't need to be part of interop 2024. 🤷

[foolip]

@mayank99 it sounds like you probably know this, but this is part of https://wpt.fyi/interop-2023. We're going to evaluate all current proposal for carryover into 2024, and I'll take you filing this issue as a vote in favor of keeping :has() if it isn't done by the end of the year.

[BearCooder]

Firefox has enabled :has() support on Nightly! Should be in tomorrow's build.
https://bugzilla.mozilla.org/show_bug.cgi?id=1853701

[mayank99]

i'll wait for this to show up in Firefox stable (i believe v119) then close this issue

[foolip]

I've added the carryover-evaluation label as this is about continuing/expanding an existing focus area.

[jensimmons]

i'll wait for this to show up in Firefox stable (i believe v119) then close this issue

No, please do not close this issue, @mayank99. The group planning Interop 2024 will consider whether or not we want to carry this focus area over until the next year. We might have reasons to keep working on :has().

[mayank99]

ah ok, i'll keep it open then.

[jensimmons]

I started a spreadsheet of all the pseudo-classes that could be supported inside of :has(), hoping to figure out who supports what, with the goal of getting this data submitted to MDN's BCD project (where it would all get surfaced on Can I Use).

https://docs.google.com/spreadsheets/d/1NZeNiJqOEiphHJiAIB9iWsp2yxsn8fsqAJj1syM6K10/edit?usp=sharing

I think it'd be terrific to create tests for all of these, and add them to Interop 2024. Being able to use pseudo-classes inside of :has() significantly increases their usefulness. 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.

[jensimmons]

(Here's the rest of the list on the spreadsheet, or click the link above. Anyone should be able to access it.)

[jensimmons]

I opened a new proposal for the idea of extending :has()
#555