CSS HTML

Esconder elementos usando apenas CSS

15 de junho de 2020

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.

esconder elementos com CSS capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x