Esconder elementos usando apenas CSS

Neste artigo vamos aprender as diversas formas de esconder elementos usando apenas CSS, para que você possa manipular sua página web.

E aí programador, tudo certo? Bora aprender coisa nova!

A forma correta de esconder elementos com CSS, é utilizando a propriedade display com o valor de none

Assim os elementos selecionados somem do HTML, veja como usar a regra:

p {
 display: none;
}

Desta maneira os parágrafos da página vão sumir

Lembre-se que você deve aplicar nos elementos que precisa, e é claro pode utilizar classes e ids como seletores

Outra forma é alterando o visibility, a diferença é que com esta propriedade o espaço para o elemento ainda é alocado

Ele só não fica visível para o cliente, mas ele estará lá representando seu espaço

E devemos colocar o valor de visibility para hidden, veja:

.container {
 visibility: hidden;
}

Dessa forma estamos aplicando o visibility apenas para elementos que tenham a classe container

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Outra forma de ocultar elementos, que funciona como display com none, é um atributo do HTML chamado hidden

Você pode adicionar o atributo ao elemento e o mesmo sumirá da tela, veja:

<p hidden>Este parágrafo não aparece</p>

O atributo hidden tem valor semântico também, indica que o elemento com este atributo não tem valor para a página, ou seja, não é relevante

Conclusão

Neste artigo vimos s três formas mais utilizadas para esconder elementos usando apenas CSS, e a última com HTML puro (que também é uma boa alternativa)

Agora que você já está munido de diversas formas para esconder elementos, basta escolher a que mais combina com a sua necessidade

Obs: Caso você não saiba o que é HTML semântico, evite a do atributo para não utilizar errado

Aconselho você a dar uma olhada neste assunto, que é de suma importância para qualquer desenvolvedor web

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube