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.

[wortwart]

That's indeed annoying but standard CSS behavior. CSS is tolerant about unknown props but not about unknown selectors even if comma-separated. I don't see a better option than to copy and paste your styles - as for every selector which hasn't 100% browser support.

[LeaVerou]

Please note that `:is()` and `:where()` use `<forgiving-selector-list>` so `:is(.has-span, div:has(span))` should do what you want.

See: https://www.w3.org/TR/selectors/#matches

[stratboy]

Wow! Special guest here! 😊

[WorkSnakes]

I sure hope so. I was crestfallen at the start of this year to learn that :has() wasn't support by FF. Fortunately, we were able to build our little interactive from the ground up instead of using the LMS.

However, I am not as fortunate in other projects.

[fateofangel]

when it will be available?

[CLampe]

Probably within the first half of 2023. @Honza said above that it's in active development.

[teuna]

bro I need this bad, thank you team

[stevesanders]

Are there any updates on this? We are getting close to the second half of this year.

[Honza]

Yes, we are actively working on this. Two last bugs need to be fixed:

Bug 1792501 - has selector stays frozen

Bug 1833679 - Generate DevTools warning for Unconstrained `:has()` selectors

The plan is to get them in Firefox 116

Honza

[Jon]

The feature is currently 'In development' - check out @Honza's post in this thread for more information and stay tuned for updates 😀

[maxkarkowski]

The nightly Firefox build is on version 117. The has prop ist still not supported fully. are there any updates ? 🙂