CSS :empty Pseudo Classe
Usa la pseudo-classe CSS :empty per selezionare elementi vuoti. Scopri come funziona e pratica con esempi interattivi.
La pseudo-classe CSS :empty seleziona gli elementi che non hanno alcun figlio — né elementi figli né contenuto testuale. È particolarmente utile per stilizzare o nascondere i contenitori "vuoti" restituiti da un template, CMS o API privi di contenuto, in modo da eliminare lo spazio che altrimenti lascerebbero nella pagina.
Questa pagina spiega come :empty determina se un elemento è vuoto, l'insidia degli spazi bianchi che trae in inganno la maggior parte degli sviluppatori, un uso pratico per nascondere blocchi vuoti e degli esempi eseguibili che puoi modificare.
Cosa si considera vuoto
Un elemento corrisponde a :empty quando, tra il tag di apertura e quello di chiusura, non c'è nulla — né testo, né commenti come contenuto, né elementi annidati:
- Se un tag di chiusura segue direttamente il tag di apertura (
<p></p>), l'elemento è vuoto. - Gli elementi auto-chiudenti come
<hr />,<br />e<img />non possono avere figli, quindi corrispondono sempre a:empty. - Gli pseudo-elementi
::beforee::afternon vengono considerati figli. Un elemento con contenuto generato da::before/::aftercorrisponde comunque a:emptyperché quel contenuto non fa parte del DOM.
L'insidia degli spazi bianchi
Gli spazi bianchi contano come contenuto testuale, quindi un elemento non è vuoto se contiene spazi, tabulazioni o interruzioni di riga:
<p></p>
<!-- Matches :empty — truly empty -->
<p>
</p>
<!-- Does NOT match — the newline and spaces are text content -->Questo è il motivo più comune per cui :empty "non funziona": un template che formatta il proprio output lascia spazi bianchi tra i tag. Se hai bisogno di selezionare elementi che contengono solo spazi bianchi, considera la pseudo-classe :blank (ancora sperimentale) oppure rimuovi gli spazi bianchi nel markup. Per selezionare elementi in base ad altre condizioni, consulta :not().
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>Nascondere gli elementi vuoti
Un utilizzo frequente nella pratica reale è comprimere un elemento che è arrivato vuoto in modo che non lasci un margine, un bordo o uno spazio di sfondo. Combina :empty con display: none:
/* An alert box that should disappear when it has no message */
.alert:empty {
display: none;
}In questo modo <div class="alert"></div> viene rimosso dal layout, mentre <div class="alert">Salvato!</div> viene visualizzato normalmente. Ciò lascia al CSS il controllo del risultato visivo, senza richiedere logica lato server per omettere l'elemento.
Supporto browser e versione
:empty è supportato da tutti i browser moderni. È stato definito in due specifiche, entrambe con lo stesso comportamento:
Selectors Level 4 mantiene lo stesso comportamento di :empty rispetto al Level 3, selezionando solo elementi che non hanno assolutamente nessun figlio — testo, commenti ed elementi annidati escludono tutti la corrispondenza.