Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

:empty - Sélecteur CSS

:empty

Résumé des caractéristiques du sélecteur :empty

Description rapide
Pseudo-classe désignant les éléments sans contenu.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Description de la pseudo-classe :empty.

Le sélecteur pseudo-classe :empty désigne les éléments vides, c'est à dire ceux qui ne comportent pas de contenu et qui n'ont pas d'éléments enfants.

Le niveau 4 de la spécification précise que les éléments qui ne contiennent que un ou plusieurs espaces doivent être considérés comme vides, et donc ciblés par la pseudo-classe :empty. Ceci est plus conforme à ce que voit l'utilisateur.

Exemples d'utilisation de :empty.

L'exemple ci-dessous montre l'effet de la pseudo-classe :empty sur des cellules de tableau : les cellules vides ont un contour rouge, en plus de la bordure noire commune à toutes les cellules.
La dernière cellule contient un espace. La dernière version de la norme précise que les espaces doivent être considérés comme un contenu vide, mais peu de navigateurs traitent cette particularité pour le moment (2022).

LundiMardiMercrediJundiVendredi
NatationFootingSquash

Le fonctionnement est exactement identique sur une grille. La dernière cellule contient un élément span : elle n'est donc pas considérée comme vide, bien que l'élément span soit lui-même vide.

Cellule 1
Cellule 3
Cellule 4
Cellule 5

Compatibilité des navigateurs.

La pseudo-classe :empty est bien reconnue par les navigateurs actuels. Par contre le fait d'assimiler à vide les éléments qui contiennent seulement un ou plusieurs espaces est loin d'être géré (2022).

1
:empty
2
Prise en charge des espaces
Estimation de la prise en charge en pourcentage du parc actuel.
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi : pseudo-classes relatives au DOM.

De nombreuses pseudo-classes permettent de désigner des éléments en fonction de leur position dans l'arbre du document (DOM).

  • :root :
  • Pseudo-classe désignant l'élément racine.

  • :empty :
  • Pseudo-classe désignant les éléments sans contenu.

  • :first-child :
  • Pseudo-classe désignant le premier enfant d'un élément.

  • :last-child :
  • Pseudo-classe désignant le dernier enfant d'un élément.

  • :nth-child() :
  • Pseudo-classe désignant un descendant d'après son numéro.

  • :nth-last-child() :
  • Pseudo-classe désignant un élément à partir de son numéro, en commençant par la fin.

  • :only-child :
  • Pseudo-classe désignant les éléments qui sont fils uniques de leur parent.

  • :first-of-type :
  • Pseudo-classe désignant les premiers éléments de chaque type.

  • :last-of-type :
  • Pseudo-classe désignant les derniers éléments de chaque type.

  • :nth-of-type() :
  • Pseudo-classe désignant un élément à partir de son numéro en ne comptant que les éléments du même type.

  • :nth-last-of-type() :
  • Pseudo-classe désignant un élément à partir de son numéro en ne comptant que les éléments du même type et en commençant par la fin.

  • :only-of-type :
  • Pseudo-classe désignant les éléments qui sont fils unique dans leur type.