Pseudo-classe empty
La pseudo-classe empty définit l'apparence
d'un élément vide (ne contenant pas de texte).
Syntaxe
sélecteur:empty {
}
Exemple
Dans cet exemple, le dernier li est vide,
mais aura quand même un puce :
<ul>
<li>élément de liste</li>
<li>élément de liste</li>
<li>élément de liste</li>
<li>élément de liste</li>
<li></li>
</ul>
:
Exemple
Modifions le comportement pour la balise li vide :
<ul>
<li>élément de liste</li>
<li>élément de liste</li>
<li>élément de liste</li>
<li>élément de liste</li>
<li></li>
</ul>
li:empty {
border: 1px solid blue;
list-style-type: circle;
color: blue;
width: 100px;
}
:
Exemple
Masquons complètement les li vides :
<ul>
<li>élément de liste</li>
<li>élément de liste</li>
<li>élément de liste</li>
<li>élément de liste</li>
<li></li>
</ul>
li:empty {
display: none;
}
:
Voir aussi
-
la propriété
empty-cells,
qui indique au navigateur comment afficher l'arrière-plan et la bordure des cellules de tableau vides
