CSS :empty Pseudo-Classe
Utilisez la pseudo-classe CSS :empty pour sélectionner les éléments vides. Découvrez-la et pratiquez avec des exemples.
La pseudo-classe CSS :empty sélectionne les éléments qui n'ont aucun enfant — ni éléments enfants ni contenu texte. Elle est particulièrement utile pour styliser ou masquer les conteneurs « vides » renvoyés par un template, un CMS ou une API sans aucun contenu, afin de supprimer l'espace vide qu'ils laisseraient autrement sur la page.
Cette page explique comment :empty détermine si un élément est vide, le piège lié aux espaces blancs qui surprend la plupart des gens, une utilisation pratique pour masquer les blocs vides, ainsi que des exemples modifiables et exécutables.
Ce qui compte comme vide
Un élément correspond à :empty lorsque, entre sa balise ouvrante et sa balise fermante, il n'y a rien — ni texte, ni commentaires comme contenu, ni éléments imbriqués :
- Si une balise fermante suit directement la balise ouvrante (
<p></p>), l'élément est vide. - Les éléments auto-fermants tels que
<hr />,<br />et<img />n'ont pas d'enfants possibles, ils correspondent donc toujours à:empty. - Les pseudo-éléments
::beforeet::afterne sont pas comptés comme des enfants. Un élément avec du contenu généré par::before/::aftercorrespond quand même à:emptycar ce contenu ne fait pas partie du DOM.
Le piège des espaces blancs
Les espaces blancs comptent comme du contenu texte, donc un élément n'est pas vide s'il contient des espaces, des tabulations ou des sauts de ligne :
<p></p>
<!-- Matches :empty — truly empty -->
<p>
</p>
<!-- Does NOT match — the newline and spaces are text content -->C'est la raison la plus fréquente pour laquelle :empty « ne fonctionne pas » : un template qui formate joliment sa sortie laisse des espaces blancs entre les balises. Si vous devez sélectionner des éléments contenant uniquement des espaces blancs, consultez la pseudo-classe :blank (encore expérimentale) ou supprimez les espaces blancs dans votre balisage. Pour cibler des éléments selon d'autres conditions, consultez :not().
Syntaxe
Exemple de syntaxe CSS :empty
:empty {
css declarations;
}Exemple du sélecteur :empty avec la balise <p> :
Exemple de code CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:empty {
width: 200px;
height: 30px;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p></p>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Exemple du sélecteur :empty avec la balise <div> :
Autre exemple de code CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:empty {
background-color: #ccc;
padding: 15px;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div></div>
<p>
Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Masquer les éléments vides
Une utilisation courante dans le monde réel consiste à faire disparaître un élément arrivé vide pour qu'il ne laisse pas de marge, de bordure ou de fond apparent. Combinez :empty avec display: none :
/* An alert box that should disappear when it has no message */
.alert:empty {
display: none;
}Ainsi, <div class="alert"></div> est retiré de la mise en page, tandis que <div class="alert">Saved!</div> s'affiche normalement. Cela permet à votre CSS de gérer le résultat visuel au lieu d'exiger une logique côté serveur pour omettre l'élément.
Compatibilité des navigateurs et version
:empty est pris en charge par tous les navigateurs modernes. Elle a été définie dans deux spécifications, toutes deux avec le même comportement :
Selectors Level 4 maintient le même comportement pour :empty que Level 3, en ne sélectionnant que les éléments sans aucun enfant — le texte, les commentaires et les éléments imbriqués invalident tous une correspondance.