:empty

La pseudo-classe :empty correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires n'ont pas d'influence sur le contenu de l'élément.

/* Cible tous les éléments <div> qui n'ont pas de contenu */
div:empty {
  background: lime;
}

Syntaxe

:empty

Exemples

CSS

body {
  display: flex;
  justify-content: space-around;
}

.box {
  background: red;
  height: 100px;
  width: 100px;
}

.box:empty {
  background: blue;
}

HTML

<div class="box"><!-- Je serai bleu. --></div>
<div class="box">Je serai rouge.</div>
<div class="box">
    <!-- Je serais rouge à cause des espaces autours du commentaire --> 
</div>

Résultat

Spécifications

Compatibilité des navigateurs