:empty

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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, les attributs ou le contenu généré en CSS avec content n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).

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

Note : Avec CSS4 Selectors, le sélecteur :empty a été modifié afin de se comporter comme :-moz-only-whitespace mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.

Syntaxe

Error: could not find syntax for this item

Exemples

CSS

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

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

.box:empty {
  background: blue;
}

HTML

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

Résultat

Accessibilité

Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle (<a>, <button>, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de l'arbre d'accessibilité, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.

Le texte fournissant le nom accessible peut être masqué grâce à des propriétés afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.

Spécifications

Specification
Selectors Level 4
# the-empty-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:empty
Matches elements with whitespace

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Voir aussi