Pseudo-classe CSS :empty
Use a pseudo-classe CSS :empty para selecionar os elementos vazios. Saiba mais sobre a pseudo-classe e pratique com os exemplos.
A pseudo-classe CSS :empty seleciona elementos que não têm quaisquer elementos filhos nem conteúdo textual.
Os pseudo-elementos ::before e ::after não afetam o facto de um elemento estar vazio, mesmo que existam dentro do elemento.
Se uma tag de fecho seguir diretamente a tag de abertura, o elemento é considerado vazio.
Os elementos de fecho automático, como <hr />, <br /> e <img />, são considerados vazios e correspondem ao seletor :empty.
Versão
O Selectors Level 4 mantém para :empty o mesmo comportamento do Level 3, selecionando apenas elementos sem absolutamente nenhum filho.
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>