O pouco conhecido pseudo-classe :empty é utilizado para selecionar os elementos vazios, elementos sem qualquer conteúdo ou elementos que contenham apenas comentários. É útil para ocultar elementos vazios, por exemplo, que possam causar espaçamentos indesejados.
Esse pseudo-classe funciona na maioria dos navegadores. No Internet explorer funciona a partir da versão 9. Confira o suporte do pseudo-classe empty para os principais navegadores.
Usando o pseudo-classe : empty
<p></p> <div></div> <div><!-- exemplo --></div>
p:empty, div:empty {
background: red;
width:100px;
height:100px;
border:solid;
}
No exemplo acima todos os elementos receberão a estilização do CSS.
Outro exemplo do uso do pseudo-classe : empty
<div><p></p></div> <div><br/></div> <div>Algún texto.</div>
div:empty {
display: none;
}
No exemplo acima nenhum elemento seria oculto (display: none;) já que todos possuem conteúdos, seja texto ou outros elementos HTML.
Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.