Seletor CSS :empty

Frequentemente precisamos aplicar estilos a elementos que possuem conteúdo. Mas o que fazer quando um elemento não tem nenhum conteúdo ou filhos? Para isso, podemos utilizar o seletor :empty! 🎨

<div>hey</div>
<!-- NÃO está vazio: contém texto -->

<div> </div>
<!-- NÃO está vazio: contém um espaço em branco -->

<div></div>
<!-- SIM, está vazio: nada dentro -->

Estes blocos cinzentos acima foram gerados com o seguinte conjunto HTML e CSS:

<div class="our-div">!</div>
<div class="our-div"></div>

.our-div {
  margin: 16px 0;
  padding: 16px;
  background: gainsboro;
}

.our-div:empty {
  background: gray;
}

O que é considerado vazio?

Um detalhe importante sobre :empty é entender o que ele realmente considera como um elemento vazio. Vamos nos basear na definição fornecida pela MDN:

A pseudo-classe CSS :empty representa qualquer elemento que não tenha filhos. Aqui, filhos podem ser outros elementos ou blocos de texto (incluindo espaços em branco). Comentários e instruções de processamento não são considerados ao se determinar se um elemento é vazio.

✅ Considerado vazio

Se um elemento não contém nenhum espaço em branco ou qualquer outro tipo de filho, ele é reconhecido como vazio.

<p></p>

Mesmo se houver um comentário dentro do elemento, ele ainda será tratado como vazio, desde que não haja espaços em branco ou quberas de linha:

<p><!-- comentário --></p>

❌ Não é vazio

Se houver qualquer espaço em branco dentro do elemento, ele não será considerado vazio. Isso inclui espaços simples ou quebras de linha.

Se o elemento contiver outro elemento dentro dele, ele também não será considerado vazio.

<p> </p>

<p>
  <!-- comentário -->
</p>

<p><span></span></p>

Exemplos práticos :empty: mensagens de erro

Vamos utilizar o :empty para exibir um ícone de erro em determinado elemento apenas quando o elemento estiver vazio.

<!-- Sem mensagem de erro -->
<div class="our-div-error"></div>

<!-- Com mensagem de erro -->
<div class="our-div-error">E-mail inválido</div>

.our-div-error:before {
  content: '❌';
}

.our-div-error:empty:before {
  content: 'Erro: ';
}

Suporte nos navegadores

O seletor :empty é amplamente suportado, funcionando em todos os navegadores modernos, incluindo versões jurássicas 🦕 como o Internet Explorer 9. Espero que este artigo tenha sido útil para você! Ate a próxima ✌️