Na maior parte do tempo damos estilo a elementos que contêm alguma coisa. E quando um elemento não tem filhos nem texto? É simples, podes usar o seletor :empty.
<p> </p>
<!-- Pas à cause de l'espace blanc -->
<p></p>
<!-- Vide car pas d'espace blanc -->
p::before {
font-family: 'FontAwesome';
content: 'f240';
}
p:empty::before {
content: 'f244';
}
p {
color: silver;
}
p:empty {
color: red;
}
O que conta como vazio?
Quando dei de caras com isto pela primeira vez, havia alguma confusão sobre o que este seletor considera vazio. Fiquemos pela definição da MDN:
A pseudo-classe CSS :empty representa qualquer elemento que não tenha filhos. Os filhos podem ser nós de elementos ou texto (incluindo espaços em branco). Os comentários, as instruções de processamento e o conteúdo gerado por CSS não influenciam se um elemento é ou não considerado vazio.
:empty
Desde que não haja espaço em branco, o elemento está vazio.
<p></p>
Um comentário pelo meio continua a contar como elemento vazio. Desde que não haja espaço em branco.
<p><!-- comment --></p>
Não :empty
O espaço em branco conta como não vazio. Até uma nova linha é espaço em branco, portanto: não vazio! Insisto neste ponto porque cometi o mesmo erro.
<p> </p>
<p>
<!-- comment -->
</p>
Ter um elemento filho também conta como não vazio
<p><span></span></p>
O espaço em branco na futura especificação
A boa notícia é que nos Selectors Level 4 o espaço em branco vai contar como vazio. Isso fará com que se comporte como :-moz-only-whitespace. Por outras palavras, isto passará a ser considerado vazio:
<p> </p>
MAS ainda não contes com isso. Nenhum browser o suporta atualmente.
Exemplos de utilização do :empty
Vejamos alguns usos concretos do :empty.
Usar o :empty numa mensagem de erro de formulário
Foi este o exemplo que me fez descobrir o :empty. Queria um ícone antes da minha mensagem de erro. O problema é que o ícone aparecia mesmo quando não havia mensagem nenhuma. Sem problema: basta usar o :empty para acrescentar o ícone apenas quando há mesmo uma mensagem.
CSS
.error:before {
color: red;
content: '274c '; /* ❌ ícone */
}
HTML
<!-- Pas de message d'erreur -->
<div class="error"></div>
<!-- Oui, un message d'erreur -->
<div class="error">Email manquant</div>
Resultado
Sem empty
❌❌ Email manquant
Com :empty
❌ Email manquant
Usar o :empty nos alertas
Aqui fica outro exemplo, com o :empty a esconder o estado vazio.
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
HTML
<div class="alert"></div>
<div class="alert">Message d'alerte</div>
Resultado
Sem :empty
Message d’alerte
Com :empty
Message d’alerte
Suporte dos browsers
O suporte é na verdade muito bom. Funciona em todos os browsers até ao Internet Explorer 9
