Pseudo-classe CSS :empty
Usa la pseudo-classe CSS :empty per selezionare gli elementi vuoti. Scopri la pseudo-classe ed esercitati con gli esempi.
La pseudo-classe CSS :empty seleziona gli elementi che non hanno alcun elemento figlio né contenuto testuale.
Gli pseudo-elementi ::before e ::after non influiscono sul fatto che un elemento sia vuoto, anche se sono presenti al suo interno.
Se un tag di chiusura segue direttamente il tag di apertura, l'elemento è considerato vuoto.
Gli elementi a chiusura automatica come <hr />, <br /> e <img /> sono considerati vuoti e corrispondono al selettore :empty.
Versione
Selectors Level 4 mantiene per :empty lo stesso comportamento di Level 3, selezionando solo gli elementi che non hanno assolutamente alcun figlio.
Sintassi
Esempio di sintassi CSS :empty
:empty {
css declarations;
}Esempio del selettore :empty con il tag <p>:
Esempio di codice 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>Esempio del selettore :empty con il tag <div>:
Altro esempio di codice 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>