Individuare elementi vuoti con il selettore CSS :empty

Spesso, vorremmo poter individuare (e dargli uno stile, magari) gli elementi in base al loro contenuto e non in base ai selettori “classici” quali classi, id, attributi, etc. Ma come facciamo ad individuare uno o più elementi che, ad esempio, non hanno figli oppure non contengono testo? Semplice, utilizzando il selettore :empty.

Partiamo da una piccola introduzione, che è più facile a farsi che a dirsi:

<p> </p><!-- questo NON è vuoto perché c'è uno spazio -->
<p></p><!-- questo è vuoto -->

Capito che il contenuto deve essere assolutamente assente, passiamo a scrivere del CSS utilizzando :empty:

/* Diamo un colore al <p> in base al contenuto */
p {
  color: silver;
}

p:empty {
  color: red;
}

Cos’è considerato vuoto?

Anche se prima ho cercato di semplificare, sulle prime la definizione di “vuoto” può essere fuorviante o comunque non del tutto chiara. Su Mozilla Developer Network la definizione è questa:

La pseudo-classe :empty rappresenta ogni elemento che non possiede figli. Un figlio può essere un elemento o un testo (inclusi gli spazi). Commenti, istruzioni e CSS non influenzano il selettore :empty e vengono ignorati.

Quindi, questo <p> è considerato vuoto perché non ha figli, né testo, né spazi, come abbiamo visto all’inizio:

<p></p>

I commenti, come da definizione, vengono ignorati e non contano per definire un elemento come vuoto:

<p><!-- questo è un commento, che viene ignorato! --></p>

Non vuoto

Gli spazi nel codice verranno considerati quindi come “una presenza” e quindi gli elementi che li contengono non verranno considerati vuoti. Quindi nessun daccapo, né spazio: state attenti, c’è da impazzire.

<p> </p>

<p>
<!-- commento -->
</p>

Naturalmente, se un elemento contiene uno o più altri elementi, non sarà considerato vuoto:

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

Alcuni esempi

Ok, vediamo alcuni esempi nella real-life che utilizzano :empty:

/* nascondiamo tutti gli elementi vuoti nella pagina */
*:empty {
    display: none;
}

/* nascondiamo tutti i <p> vuoti */
p:empty {
    display: none;
}

/* selezioniamo tutte le voci del menu vuote */
nav a:empty {
    display: none;
}

/* selezioniamo le celle vuote (di qualsiasi tabella) e gli impostiamo un colore di sfondo */
td:empty {
    background-color: #ff0;
}

Supporto del browser

Come possiamo vedere da Can I use, questo selettore è pienamente supportato da tutte le ultime versioni di Chrome, Firefox, Safari e Edge.