:empty - Sélecteur CSS

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).

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.

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

Pseudo-classe
:empty

2

Prise en charge
des espaces

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra Mobile

KaiOS Browser

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

Chrome

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

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).

:first-child
Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.
:first-of-type
Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.
:last-child
Pseudo-classe ciblant le dernier enfant d'un élément, dans l'ordre du document.
:last-of-type
Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.
:nth-child()
Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
⚠
:nth-col()
Pseudo-classe ciblant une des colonnes dans un container grille d'après son numéro.
:nth-last-child()
Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.
⚠
:nth-last-col()
Pseudo-classe ciblant une des colonnes dans un container grille, en commençant le comptage par la fin.
:nth-last-of-type()
Pseudo-classe ciblant 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.
:nth-of-type()
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.
:only-child
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
:only-of-type
Pseudo-classe désignant les éléments qui sont fils unique de leur parent, en ne considérant que les éléments de type identique.
:root
Pseudo-classe ciblant l'élément racine du document (en HTML, l'élément racine est l'élément HTML).
:scope
Cible l'élément courant. Utile dans le cas de règles imbriquées (nested CSS).
::part()
Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).