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:

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

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:

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

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.

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

Alcuni esempi

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

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.