cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
stratboy
Making moves
Status: Delivered

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.

74 Comments
jscher2000
Leader

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
New member

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
Leader

@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
Employee
Employee

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
New member

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
New member

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
Making moves

Wow! Special guest here! 😊

WorkSnakes
Strollin' around

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
New member

when it will be available?

CLampe
Making moves

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