How do you hide some element using CSS?

There are more ways how to hide element. Each of them is useful under certain conditions.

Display

For completely hiding an element, use display: none; style. The display property defines what is the display style of the element. If the property value is set to none, the element and all its descendants will be hidden.

No user interaction can be done with element hidden this way. The element is also invisible for screen readers.

The element is however still present in DOM and can be manipulated by JavaScript.

.hidden {
    display: none;
}

.hidden {
  visibility: hidden;
}

Opacity

Element hidden this way is made transparen by setting its opacity property to 0. The fully transparent/invisible element still occupies space in the layout and the user can interact with the element. The opacity can be animated so it can be used for nice transitions between visible and hidden element.

.hidden {
  opacity: 0;
}

Position

If you want to make the element invisible but still have the option to interact with it, move the element out of the viewport. Such element can be read by screen readers. It can also receive focus.

.hidden {
    position: absolute;
    top: -9000px;
    left: -9000px;
}

Clip-path

This method of hiding elements is not fully supported in Internet Explorer and Edge. User interactions with element hidden this way are not possible. The property can however be animated. The element is still available to screen readers.

.hidden {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}