Pure CSS Hiding Elements

While making an interactive website, there may be elements that need to be hidden by default or on some action of the user. In this article, we will be seeing how to hide elements in Pure CSS.

Pure CSS Hiding Elements Classes:

• hidden: This class is used to hide elements while supporting old browsers like Internet Explorer.

Include the Pure CSS Base Module: The hiding utility comes with the base module of Pure CSS. So to use the hiding utility we need to include the base module in our HTML file. The link to include the base module is given below:

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">

Syntax:

1. Using the hidden attribute:

<element hidden> ... </element>

2. Using the hidden class:

<element class="hidden"> ... </element>

Example1: This example shows how to hide elements using the hidden attribute using Pure CSS. Note that using hidden attributes does not hide elements on old browsers like Internet Explorer.

Output:

👁 Image

Example2: This example shows how to hide elements using hidden class on the element. This also works on old browsers like Internet Explorer.

Output:

👁 Image

Reference: https://pure-css.github.io/#extras