How to make CSS :has() pseudo-class work on Firefox
#css#firefox
Julia 👩🏻‍💻 GDE

Julia 👩🏻‍💻 GDE @yuridevat

About: 👋 Selftaught Python Developer & Google Developer Expert 💻 Into Cyber Security & Darknet Diaries

Location:
Vienna, Austria
Joined:
May 11, 2020

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

Publish Date: Jan 1 '24
7 10

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

Comments 10 total

  • GrahamTheDev
    GrahamTheDevJan 1, 2024

    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
      Julia 👩🏻‍💻 GDEJan 2, 2024

      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
        GrahamTheDevJan 3, 2024

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

  • Raí B. Toffoletto
    Raí B. ToffolettoJan 2, 2024

    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.

  • Raí B. Toffoletto
    Raí B. ToffolettoJan 2, 2024

    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
      Julia 👩🏻‍💻 GDEJan 2, 2024

      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
    Quang TrinhMar 18, 2024

    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.

Add comment