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