Spesso vogliamo dare uno stile agli elementi che contengono qualcosa. E quando un elemento non ha né figli né testo? Semplice: c’è il selettore :empty.
<p> </p>
<!-- Pas à cause de l'espace blanc -->
<p></p>
<!-- Vide car pas d'espace blanc -->
p::before {
font-family: 'FontAwesome';
content: 'f240';
}
p:empty::before {
content: 'f244';
}
p {
color: silver;
}
p:empty {
color: red;
}
Che cosa viene considerato vuoto?
La prima volta che ho incontrato questo caso c’era una certa confusione su che cosa questa pseudo-classe considera vuoto. Restiamo alla definizione di MDN:
La pseudo-classe CSS :empty rappresenta qualsiasi elemento che non ha figli. I figli possono essere nodi elemento oppure testo (spazi bianchi compresi). Commenti, istruzioni di elaborazione e contenuto generato da CSS non incidono sul fatto che un elemento sia considerato vuoto.
:empty
Finché non c’è nessuno spazio, l’elemento è vuoto.
<p></p>
Anche un commento in mezzo lascia l’elemento vuoto. Sempre a patto che non ci sia uno spazio.
<p><!-- comment --></p>
Non :empty
Gli spazi bianchi contano come contenuto. Anche un semplice a capo è uno spazio bianco, quindi l’elemento non è vuoto! Insisto su questo punto perché ci sono cascato anch’io.
<p> </p>
<p>
<!-- comment -->
</p>
Anche avere un elemento figlio conta come non vuoto
<p><span></span></p>
Gli spazi bianchi nelle specifiche future
La buona notizia è che nei Selectors Level 4 gli spazi bianchi saranno considerati vuoti! Il comportamento sarà lo stesso di :-moz-only-whitespace. In altre parole, questo sarà considerato vuoto:
<p> </p>
MA non farlo ancora. Al momento nessun browser lo supporta.
Esempi d’uso di :empty
Vediamo qualche esempio concreto di utilizzo di :empty.
Usare :empty per il messaggio di errore di un form
È l’esempio che mi ha fatto scoprire :empty. Volevo far precedere il messaggio di errore da un’icona, ma l’icona compariva anche quando non c’era nessun messaggio. Nessun problema: basta usare :empty per aggiungere l’icona solo quando il messaggio di errore c’è davvero.
CSS
.error:before {
color: red;
content: '274c '; /* ❌ icona */
}
HTML
<!-- Pas de message d'erreur -->
<div class="error"></div>
<!-- Oui, un message d'erreur -->
<div class="error">Email manquant</div>
Risultato
Senza :empty
❌❌ Email mancante
Con :empty
❌ Email mancante
Usare :empty negli alert
Ecco un altro esempio: :empty per nascondere lo stato vuoto.
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
HTML
<div class="alert"></div>
<div class="alert">Message d'alerte</div>
Risultato
Senza :empty
Messaggio di alert
Con :empty
Messaggio di alert
Supporto dei browser
Il supporto è in realtà ottimo. Funziona su tutti i browser fino a Internet Explorer 9
