:empty - Sélecteur CSS

:empty

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

Description rapide
Pseudo-classe ciblant 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 la pseudo-classe :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 navigateur avec :empty.

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

Colonne 1
Support par les navigateurs de la pseudo-classe :empty qui cible les éléments vides (qui n'ont pas de contenu).
Colonne 2
Support par les navigateurs du niveau 4 de la spécification, qui considère que les espaces ne suffisent pas pour que l'élément soient considérés comme non-vide.
1
Pseudo-classe
:empty
2
Prise en charge
des espaces
Estimation de la prise en charge globale.
97%
0%

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

Historique de la pseudo-classe :empty.

  • Sélecteurs - Niveau 3

    Concernant :empty Introduction de la pseudo-classe :empty.
    WD
    03 Août 1999
    Document de travail.
    CR
    13 Novembre 2001
    Candidat à la recommandation.
    PR
    15 Décembre 2009
    Proposé à la recommandation.
    REC
    29 Septembre 2011
    Recommandation.

  • Sélecteurs - Niveau 4

    Concernant :empty Le niveau 4 de la spécification prévoit maintenant que la pseudo-classe :empty cible les éléments qui ne contiennent que des espaces.
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

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

:empty
Pseudo-classe ciblant les éléments sans contenu.
: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).