When is :has() css selector going to be fully implemented in Firefox?

[stratboy]

I'd like to ask devs when they think :has css selector will be finally fully implemented in firefox. In fact, it's the only browsers blocking this revolution in css authoring.

[jscher2000]

Currently, it's an optional feature that a user can enable for testing (based on the Browser Compatibility note): https://developer.mozilla.org/docs/Web/CSS/:has

However, there are a lot of blocking bugs. One of the developers recently indicated that it's a first-half-of-2023 project to complete work on it: https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c62

[suprmllr]

Even more worse than not supporting the :has selector is, that if you are using this new feature in a selector list, the complete selector fails. This means that it is complicated to implement a fallback for Firefox.

The following selector should select all elements that have the fallback class has-span or that have a span as a child – but Firefox ignores the whole selector:

.has-span,
div:has(span) {
color: red;
}

You can see a live example here: https://codepen.io/supermueller/pen/dyqmzYj

[jscher2000]

---

@suprmllr wrote:

Even more worse than not supporting the :has selector is, that if you are using this new feature in a selector list, the complete selector fails. This means that it is complicated to implement a fallback for Firefox.

---

I see, this appears in the Web Console:

Unknown pseudo-class or pseudo-element ‘has’. Ruleset ignored due to bad selector.

I see this in Firefox 110 (released last month). Today's release of Firefox 111.0 appears to have some new code linked to this error message, but I haven't tested whether it makes any difference or just reinforces the same behavior.

Update: No change in Firefox 111.

Since your example rule doesn't compound if applied multiple times, you probably need to duplicate it into two rules until this gets sorted out.

You or someone could file a new bug at https://bugzilla.mozilla.org/ saying that a single unsupported selector should not invalidate an entire ruleset.

[Honza]

Support for :has() CSS selector is under active development and should be completed in two months. Some time will also be needed for the feature to get it into the release channel (nightly->beta->release). So, the time frame is first half of this year.