24

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?

Cédric
  • 2,239
  • 3
  • 10
  • 28
Jason Bingham
  • 243
  • 1
  • 2
  • 8
  • Any knows why is this behavior in since Firefox 103? – Maske Oct 26 '22 at 17:29
  • 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. – Chester Fung Dec 30 '22 at 12:10
  • 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. – Martin Jul 31 '23 at 17:05

1 Answers1

25

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

enter image description here

Cédric
  • 2,239
  • 3
  • 10
  • 28
  • 10
    As of November 29, 2022, this is an outdated spec and it doesn't seem to work very well – wesbos Nov 29 '22 at 19:33
  • According to [CanIUse](https://caniuse.com/?search=has) it's supposed to be supported after enabling it, for Firefox 103+ (current max 109), I made a [quick test](https://i.imgur.com/yXGSImC_d.webp?maxwidth=760&fidelity=grand) (v107.0.1) and it seems to work – Cédric Nov 30 '22 at 08:26
  • 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. – Chester Fung Dec 30 '22 at 12:11
  • 4
    The flag doesn’t seem to work in 108.0.2, does it? A simple demo [like this](https://stackoverflow.com/a/73798163/2083613) works in Chrome, bot not in Firefox. – dakab Jan 13 '23 at 07:50
  • 5
    @dakab Still does not work in 109.0.1. – npetrov937 Feb 15 '23 at 18:32
  • 10
    As of Firefox 110 the "has" selector doesn't seem to work even with the flag layout.css.has-selector.enabled – Chris Kavanagh Feb 19 '23 at 03:03
  • 4
    Same for me, this flag seems to be not working in 109.0.1 + – Radon8472 Feb 20 '23 at 11:55
  • 2
    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 :( – Radon8472 Feb 20 '23 at 12:14
  • Just upgraded to v111. Still not working. Damned frustrating! – Scott Sauyet Mar 22 '23 at 00:55
  • 4
    There is an open bugzilla bug for this that the devs have said they intend to address in the first half of '23. More: https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c62 – Franklin Skipwhistle Mar 29 '23 at 16:59
  • @wesbos Outdated spec? Says who? – ﾤ ﾡ Jul 14 '23 at 11:16
  • The flag works. It's just that there are still some bugs, which is why it's currently experimental. – mbomb007 Jul 28 '23 at 16:54