Ir para conteúdo / Skip to content

CSS3 - A PSEUDO-CLASSE :empty

blog reactions Postado em: 12 de setembro de 2007 por Pedro Rogério

Essa pseudo-classe é aplicada a elementos vazios do HTML, ou seja, imagine que você tem uma tag p dessa forma:


<p></p>

Se no CSS você criar uma definição dessa forma:


p:empty { background-color:#FF0000; }

Todos os parágrafos vazios da página ficarão com a cor de fundo vermelha. A primeira impressão pode parecer inútil utilizá-la, mas imagine onde o conteúdo é gerado dinamicamente, seria uma boa pra vc descobrir quais tags estão sem conteúdo. Para que fique mais claro o entendimento do tutorial, dêem uma olhada no seguinte exemplo. Lembrando que só funciona no Mozilla, Konqueror e Safari.

Referências

Deixe seu comentário

4 comentários para esse post

  1. Guilherme Veras disse: 12.09.07 ás 10:25
    #1

    Esta dica é legal para que usa algum tipo de CMS e quer debugar.

  2. Jader Rubini disse: 12.09.07 ás 11:56
    #2

    É bom também pra quem vai colocar um CMS na mão do cliente. Muitas vezes o cliente escreve o texto, dá vários ENTER, depois volta e vai editar uma parte anterior, dá mais alguns ENTER… ai já viu né, fica aquele monte de parágrafo vazio.

    Um p:empty { display:none; } resolveria o problema. Apenas resolveria, porque, se tratando de CSS3… até que a gente possa usá-lo, vai demorar bastante.

  3. Pedro Rogério disse: 12.09.07 ás 12:18
    #3

    @Jader,

    Com certeza Jader, mas no atual momento isso é bom para nós desenvolvedores descobrir-mos problemas em nossa página, mais uma forma de debugar o código.

  4. Fill disse: 12.09.07 ás 15:49
    #4

    @Jade, eu concordo com o Pedro Rogério, quem trabalha com linguagens dinamicas tem a opção de fazer um if e testar, se o conteudo for igual a nada ele nem mostra o . Acho que ele se referiu a uma forma de encontrar lugares onde os ’s nao tem nada =)

Deixe seu comentário