pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Pseudo-class :empty em CSS

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.

Categorias: CSS |

Comentários desativados.

Topo