Pseudo-classe empty

La pseudo-classe empty définit l'apparence d'un élément vide (ne contenant pas de texte).

Syntaxe

csssélecteur:empty {
  
}

Exemple

Dans cet exemple, le dernier li est vide, mais aura quand même un puce :

html<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 :

html<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>

cssli:empty {
  border: 1px solid blue;
  list-style-type: circle;
  color: blue;
  width: 100px;
}

Результат:

Exemple

Masquons complètement les li vides :

html<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>

cssli:empty {
  display: none;
}

Результат:

Voir aussi