Accueil >CSS >Référence CSS – propriétés, sélecteurs, fonctions >:empty

:empty

sélecteur:empty

Sélectionne un élément qui n’a aucun enfant – ni élément ni texte, pas même une espace. Les commentaires ne comptent pas. Elle convient pour masquer une boîte qui ne reçoit du contenu que parfois (messages d’un formulaire, panier, résultats de recherche). Spécificité 0-1-0.

Exemples

Une boîte avec un message d’erreur n’est visible que quand elle contient un message :

<div class="error">Indiquez votre e-mail.</div>
<div class="error"></div>
<p class="next">Le texte sous les messages.</p>

.error {
  margin-bottom: 8px;
  padding: 6px 10px;
  border-left: 4px solid #c62828;
  background: #ffebee;
}
.error:empty { display: none; }
.next { margin: 0; }

Résultat

Indiquez votre e-mail.

Le texte sous les messages.

Points d’attention

Une espace ou un retour à la ligne entre les balises compte comme du texte : ni <div class="error"> </div> ni un <div> avec un retour à la ligne avant </div> ne sont vides. Attention aux gabarits qui indentent leur contenu.
Le contenu de ::before ou de ::after ne compte pas – un élément qui en a reste :empty.
Les éléments qui ne peuvent pas avoir de contenu (<input>, <img>, <br>) sont toujours :empty, même quand le champ est rempli. Un champ vide se détecte avec :placeholder-shown.

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 1, Firefox 1, Safari 3.1. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
:only-child
:has()
:placeholder-shown
::before et ::after
display