La pseudo-classe :empty in CSS consennte di selezionare, dato un selettore, tutti gli elementi che non contengono al loro interno un child, letteralmente un “figlio”, ovvero un altro elemento all’interno di essi.
div:empty {
background-color: red;
}Il codice dell’esempio appena riportato andrà a selezionare ogni elemento <div> che al suo interno non ha altri elementi. Possiamo visualizzare come si comporterebbe con il seguente blocco di codice HTML:
<div>
<p>Questo elemento ha del contenuto!</p>
</div>
<div>
<ul>
<li>Anche questo elemento</li>
<li>ha del contenuto.</li>
</ul>
</div>
<div>
<!-- Questo elemento invece no, ha solo un commento,
che non è considerato contenuto! -->
</div>Gli elementi vuoti
Un elemento si considera vuoto quando non c’è nulla tra il tag di apertura e quello di chiusura:
<div></div>Questo include anche gli elementi che contengono al loro interno solo commenti:
<div><!-- Un commento non è considerato contenuto! --> </div>Anche se l’elemento in questione ha al suo interno del contenuto generato utilizzando la proprietà content di CSS attraverso :before o :after, viene comunque considerato vuoto.
div:before {
content: "Il contenuto rimane vuoto";
}Gli elementi NON vuoti
Un elemento è detto avere dei “figli” (Child) se contiene un altro elemento, del testo o spazi bianchi tra i suoi tag. Tutti e tre gli elementi nel seguente esempio non sono considerati vuoti.
<div>
<p>Questo elemento contiene un altro elemento.</p>
</div>
<p>Il testo viene considerato child di un elemento.</p>
<strong> </strong>Anche l’ultimo elemento viene considerato non-vuoto dato che ha degli spazi vuoti al suo interno. Per questo motivo dobbiamo stare attenti soprattutto con gli editor di testo, che potrebbero aggiungere degli spazi vuoti all’interno degli elementi a nostra insaputa (es: per l’indentazione).