How do you enable :has() selector on Firefox

Question

When I check the :has() CSS selector on caniuse.com, it tells me that since Firefox103 it has been

Supported in Firefox behind the layout.css.has-selector.enabled flag.

So how do I find this flag and enable it?

Matias

Any knows why is this behavior in since Firefox 103? – Pallbearer

Please note that even in Chrome, this :has(...) selector is not really stable if your css query is dynamic and complicated. For example, :has(:hover div>a[href]). The browser don't know the triggering of this :hover css query so that it cannot really perform well. – Blur

AS of Firefox 115 this CSS rule works, however it needs sometimes to be placed on the parent of the parent; eg: .menu a:has(img){...} does NOT work but .menu:has(a > img) { ... } DOES work. – Witchhunt

@ChesterFung That might be because you're using it wrong. I don't even know what you're trying to achieve. So of course it doesn't work. – Coopersmith

@Coopersmith imagine you have a big container (call it div.bc), a smaller container (call it div.sc), and the a[href] element. You want to make a css such that, when cursor moves into the div.sc that contains a[href], the big container will change its background color. div.bc:has(div.sc:hover a[href]){background:red}. However in reality, Chrome will become very slow to handle this selector, and Firefox will become buggy for the detection. So just avoid using :has and use JavaScript. – Blur

@Coopersmith see demo https://mcmap.net/q/438201/-how-do-you-enable-has-selector-on-firefox – Blur

@ChesterFung That's also not a good example. I haven't tried it yet but I doubt JavaScript would be much faster. – Coopersmith

Answer 1

Go to the Firefox about:config page, then search and toggle layout.css.has-selector.enabled.

Disloyalty

As of November 29, 2022, this is an outdated spec and it doesn't seem to work very well – Sturgis

According to CanIUse it's supposed to be supported after enabling it, for Firefox 103+ (current max 109), I made a quick test (v107.0.1) and it seems to work – Shiner

Please note that even in Chrome, this :has(...) selector is not really stable if your css query is dynamic and complicated. For example, :has(:hover div>a[href]). The browser don't know the triggering of this :hover css query so that it cannot really perform well. – Blur

The flag doesn’t seem to work in 108.0.2, does it? A simple demo like this works in Chrome, bot not in Firefox. – Blankly

@Blankly Still does not work in 109.0.1. – Farah

As of Firefox 110 the "has" selector doesn't seem to work even with the flag layout.css.has-selector.enabled – Repairer

Same for me, this flag seems to be not working in 109.0.1 + – Lop

Even worse... the javascript check CSS.supports ("selector(:has(:focus))")) returns TRUE, if the value in about:config is enabled, even if it is not working in firefox 1.109+. Than means we can no longer trust on the CSS.supports() method :( – Lop

Just upgraded to v111. Still not working. Damned frustrating! – Wichita

There is an open bugzilla bug for this that the devs have said they intend to address in the first half of '23. More: bugzilla.mozilla.org/show_bug.cgi?id=418039#c62 – Moll

@Sturgis Outdated spec? Says who? – Contravene

The flag works. It's just that there are still some bugs, which is why it's currently experimental. – Slowly

On their Discourse page, Honza (Mozilla employee) said it was planned to release in '23… – Armalda

do Firefox expect end users to enable this? why is it disabled by default? – Delaney

Answer 2

On latest version of Firefox version 121, they have implemented the :has(). Kindly refer the following link for the updates, https://www.mozilla.org/en-US/firefox/121.0beta/releasenotes/

Ellga