'Javascript Selector' for CSS

Sometimes you want to selectively display certain elements on a webpage depending on whether or not the user has Javascript enabled. Here's a neat trick to do so!

  1. Add the no-js class to the html element:

    <html class="no-js">
      ...
    </html>
  2. Load the following Javascript code:

    document.documentElement.classList.remove("no-js");
    document.documentElement.classList.remove("js");
  3. Include the following CSS:

    :root.no-js .when-js {
      : none !important;
    }
    
    :root.js .when-no-js {
      : none !important;
    }

Now you can add the when-js/when-no-js class to elements to only show it when Javascript is enabled/disabled!

In combination with ‘float’ and ‘position’, determines the type of box or boxes that are generated for an element.

(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 7)

Syntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

MDN Reference