Pseudoclasse empty
La pseudoclasse empty definisce l'aspetto
di un elemento vuoto (che non contiene testo).
Sintassi
selettore:empty {
}
Esempio
In questo esempio l'ultimo li è vuoto,
ma avrà comunque un marcatore:
<ul>
<li>elemento lista</li>
<li>elemento lista</li>
<li>elemento lista</li>
<li>elemento lista</li>
<li></li>
</ul>
:
Esempio
Cambiamo il comportamento per il tag li vuoto:
<ul>
<li>elemento lista</li>
<li>elemento lista</li>
<li>elemento lista</li>
<li>elemento lista</li>
<li></li>
</ul>
li:empty {
border: 1px solid blue;
list-style-type: circle;
color: blue;
width: 100px;
}
:
Esempio
Nascondiamo completamente i li vuoti:
<ul>
<li>elemento lista</li>
<li>elemento lista</li>
<li>elemento lista</li>
<li>elemento lista</li>
<li></li>
</ul>
li:empty {
display: none;
}
:
Vedi anche
-
la proprietà
empty-cells,
che indica al browser come visualizzare lo sfondo e il bordo delle celle di tabella vuote
