CSS :empty Pseudo-Classe
Use a pseudo-classe CSS :empty para selecionar elementos vazios. Leia sobre a pseudo-classe e pratique com exemplos.
A pseudo-classe CSS :empty seleciona elementos que não possuem nenhum filho — nem elementos filhos nem conteúdo de texto. Ela é mais útil para estilizar ou ocultar contêineres "vazios" que retornam de um template, CMS ou API sem nada dentro, permitindo eliminar o espaço em branco que eles deixariam na página.
Esta página explica como o :empty determina se um elemento está vazio, o problema com espaços em branco que confunde a maioria das pessoas, um uso prático para ocultar blocos vazios e exemplos executáveis que você pode editar.
O que conta como vazio
Um elemento corresponde a :empty quando, entre sua tag de abertura e fechamento, não há nada — nenhum texto, nenhum comentário como conteúdo e nenhum elemento aninhado:
- Se uma tag de fechamento vier diretamente após a tag de abertura (
<p></p>), o elemento está vazio. - Elementos auto-fechados como
<hr />,<br />e<img />não podem ter filhos, portanto sempre correspondem a:empty. - Os pseudo-elementos
::beforee::afternão contam como filhos. Um elemento com conteúdo gerado por::before/::afterainda corresponde a:emptyporque esse conteúdo não faz parte do DOM.
O problema com espaços em branco
Espaços em branco contam como conteúdo de texto, portanto um elemento não está vazio se contiver espaços, tabulações ou quebras de linha:
<p></p>
<!-- Matches :empty — truly empty -->
<p>
</p>
<!-- Does NOT match — the newline and spaces are text content -->Este é o motivo mais comum pelo qual o :empty "não funciona": um template que formata sua saída com indentação deixa espaços em branco entre as tags. Se você precisar corresponder elementos que contenham apenas espaços em branco, consulte a pseudo-classe :blank (ainda experimental) ou remova os espaços em branco da sua marcação. Para selecionar elementos por outras condições, consulte :not().
Sintaxe
Exemplo de sintaxe CSS :empty
:empty {
css declarations;
}Exemplo do seletor :empty com a tag <p>:
Exemplo de código CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:empty {
width: 200px;
height: 30px;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p></p>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Exemplo do seletor :empty com a tag <div>:
Outro exemplo de código CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:empty {
background-color: #ccc;
padding: 15px;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div></div>
<p>
Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Ocultando elementos vazios
Um uso prático bastante comum é recolher um elemento que chegou vazio para que ele não deixe uma margem, borda ou espaço de fundo. Combine :empty com display: none:
/* An alert box that should disappear when it has no message */
.alert:empty {
display: none;
}Agora <div class="alert"></div> é removido do layout, enquanto <div class="alert">Saved!</div> é renderizado normalmente. Isso mantém o CSS responsável pelo resultado visual, sem exigir lógica no lado do servidor para omitir o elemento.
Suporte e versão dos navegadores
:empty é suportado em todos os navegadores modernos. Foi definido em duas especificações, ambas com o mesmo comportamento:
O Selectors Level 4 mantém o mesmo comportamento do :empty que o Level 3, correspondendo apenas a elementos sem absolutamente nenhum filho — texto, comentários e elementos aninhados desqualificam a correspondência.