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

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

Handdrawn cute girl and mouse saying 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?

Handdrawn girl and mouse sitting in the cinema, eating popcorn and looking serious.

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

Firefox menu bar showing burger menu on the right side.

  • Select Help from the list

The wanted help item is shown as the last element in the list.

  • Select the More Troubleshooting Information from the list

The More Troubleshooting information element is shown as 4th element in the list.

  • Click Refresh Firefox

Refresh Firefox button is the first button in the list.

  • Confirm the refresh by clicking the Refresh Firefox button

Refresh Firefox button is the button on the right, the second element to choose from.

  • 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