Sélecteur CSS :empty

Souvent, nous voulons donner un style à des éléments qui contiennent du contenu. Qu’en est-il lorsqu’un élément n’a pas d’enfants ou de texte ? Facile, vous pouvez utiliser la fonction :empty sélecteur.

<p> </p>
<!-- Pas à cause de l'espace blanc -->

<p></p>
<!-- Vide car pas d'espace blanc -->
p::before {
  font-family: 'FontAwesome';
  content: 'f240';
}

p:empty::before {
  content: 'f244';
}

p {
  color: silver;
}

p:empty {
  color: red;
}

Qu’est-ce qui est considéré comme vide ?

Lorsque j’ai rencontré ce problème pour la première fois, il y avait une certaine confusion sur ce que cette propriété considère comme vide. vide. Restons-en à MDN’s définition ici :

La pseudo-classe CSS :empty représente tout élément qui n’a pas d’enfants. Les enfants peuvent être des nœuds d’éléments ou du texte (y compris les espaces blancs). Les commentaires, les instructions de traitement et le contenu CSS n’ont aucune incidence sur le fait qu’un élément soit considéré comme vide.

:empty

Tant qu’il n’y a pas d’espace, c’est un élément vide.

<p></p>

Le commentaire entre les deux est également considéré comme un élément vide. Tant qu’il n’y a pas d’espace.

<p><!-- comment --></p>

Non :empty

Les espaces blancs sont considérés comme non vides. Même dans une nouvelle ligne, il y a un espace blanc, donc pas vide ! J’insiste sur ce point, car j’ai fait la même erreur.

<p> </p>

<p>
  <!-- comment -->
</p>

Avoir un élément enfant compte aussi comme non vide

<p><span></span></p>

Espaces blancs dans les futures spécifications

La bonne nouvelle est que dans Sélecteurs Niveau 4, les espaces blancs seront considérés comme vides ! Cela permettra d’agir de la même manière que :-moz-only-whitespace. En d’autres termes, il sera considéré comme vide :

<p> </p>

MAIS, ne le faites pas encore. Actuellement, aucun navigateur ne supporte cela.

Exemples d’utilisation :empty

Voyons quelques exemples concrets d’utilisation de la fonction :empty.

Utilisation de :empty pour afficher un message d’erreur dans le formulaire

C’est l’exemple qui m’a fait découvrir :empty. Je voulais donc faire précéder mon message d’erreur d’une icône. Mais le problème est que l’icône apparaissait même lorsque je n’avais pas de message d’erreur. Mais alors pas de problème, je peux simplement utiliser la fonction :empty pour n’ajouter l’icône que lorsqu’il y a un message d’erreur.

CSS

.error:before {
  color: red;
  content: '274c '; /* ❌ icone */
}

HTML

<!-- Pas de message d'erreur -->
<div class="error"></div>

<!-- Oui, un message d'erreur -->
<div class="error">Email manquant</div>

Sortie

Sans vide

❌ Email manquant

Avec :empty

❌ Email manquant

Utilisation de :empty dans les alertes

Voici un autre exemple utilisant :empty pour cacher l’état vide.

.alert {
  background: pink;
  padding: 10px;
}
.alert:empty {
  display: none;
}

HTML

<div class="alert"></div>
<div class="alert">Message d'alerte</div>

Sortie

Sans :empty

Message d’alerte

Avec :empty

Message d’alerte

Support des navigateurs

Le support est en fait très bon. Il supporte tous les navigateurs jusqu’à Internet Explorer 9

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.