cssfirefoxpseudo-class

Workaround for :has in Firefox (not using JavaScript)

I am working on a small website for a friend of mine and am using the :has pseudo class. However, I know that there is no support on Firefox (unless someone has turned the flag on) so is there a workaround?

Essentially I am coding a hamburger menu but for use by people without JavaScript (80% of the intended audience disable JavaScript - long story) and I don't want to use span. Having watched a video from Web Dev Simplified I saw the use of input["checkbox"] but, without the :has pseudo class available, I'm a bit stuck.

I tried just using something like input:checked::before to adjust the top bar and input:checked::after for the bottom (to rotate on clicks) but this failed miserably!

Solution

  • The :has pseudo-class is not supported in Firefox at the moment. In this case, you can try sibling selectors such as + or ~.

    For example :

    HTML :

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">&#9776;</label>
<nav id="menu">
   // menu items
</nav>

CSS :

#menu {
  display: none;
}

#menu-toggle:checked + label + #menu {
  display: block; /* Can show menus if checkbox is checked */
}

    You can build your CSS file according to your specific design and requirements.