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
