How to make CSS :has() pseudo-class work on Firefox

Finally, the long-awaited :has() pseudo-class has been added to Firefox. Yeah!

I immediately started implementing it and writing a new blog post about it, but hey, wait, why isn't my styling showing up in the browser?

Turns out I needed a hard refresh for the pseudo-class to work properly on my MacBook. In case you are facing the same problem, I show you how I made it work.

Here is how to do so

• Open on the Firefox menu by clicking the burger menu

• Select Help from the list

• Select the More Troubleshooting Information from the list

• Click Refresh Firefox

• Confirm the refresh by clicking the Refresh Firefox button

• Firefox will close, refresh and open again, with all you windows and tabs restored

That's it. After that, the CSS :has() pseudo-class worked perfectly on my machine.

---

Stay tuned for my upcoming article about the CSS :has() pseudo-class on Thursday.

For other ways to make the selector work in Firefox, check out the official troubleshooting suggestions.
https://support.mozilla.org/en-US/kb/troubleshoot-and-diagnose-firefox-problems

Comments

[GrahamTheDev]

Well that sucks, if everybody has to do that then nobody will do it who isn't a techie and we still can't use :has in production without a fallback / polyfill (not that we can anyway, it will be weeks or months before enough people use the latest version and it is safe).

Oh well, old school CSS for a few more weeks I guess 🤷🏼‍♂️🤣

Looking forward to the article! 💪🏼💗

[Julia 👩🏻‍💻 GDE]

Thanks for your comment, Graham.

I rephrased it. Of course the article was meant for people who are fasing the same issue as I, and not that it is a requirement. Hopefully, it works on other machines immediately.

[GrahamTheDev]

Hopefully, I will have to go and check at my side as that is worrying lol. 💗

[Raí B. Toffoletto]

I guess you haven't rebooted your computer in a long time. 😅 Not sure on mac/windows but on linux everytime firefox update itself, it forces me to restart it fresh.

[Julia 👩🏻‍💻 GDE]

True indeed 🙊

[Raí B. Toffoletto]

Knowing other articles from the OP I think this is just a post to help people that encounter this problem. It shouldn't be something everyone needs to do.

[Julia 👩🏻‍💻 GDE]

True, I will rephrase it to make it clear that on my machine I had to do it, and that not everyone necessarily has to do it.

[Quang Trinh]

Perhaps you don't need to do a profile reset for this to work, open about:config then set layout.css.has-selector.enabled flag to true.