: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. Les commentaires sont considérés comme du vide mais attention aux espaces qui peuvent figurer avant ou après le commentaire.

Exemples de paragraphes vides : p/p p!-- commentaire --/p Exemple de paragraphe non vide : p !-- commentaire -- /p

Si du contenu est ajouté par la propriété content avant ou après l'élément, ce contenu n'est pas pris en compte pour déterminer si l'élément ext vide.

La pseudo-classe :empty ne concerne malheureusement pas les zones de saisie dans un formulaire.

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 aucun navigateurs traitent cette particularité pour le moment (2026).

LundiMardiMercrediJeudiVendredi
NatationFootingSquash

Le fonctionnement est exactement identique sur une grille (ci-dessous). La deuxième cellule est effectivement vide, tandis que 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.

On voit par ailleurs que le contenu généré par la propriété content (les tirets) n'est pas pris en compte pour déterminer les cellules vides.

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é (2026).

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

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Firefox

Chrome

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra

Safari

Chrome pour Androïd

Firefox 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

    Ce document décrit les sélecteurs qui existent déjà dans CSS1 et CSS2, et présente en plus de nouveaux sélecteurs pour CSS3 et d'autres langages qui pourraient en avoir besoin.

    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

    Ce module de spécification définit de nouveaux sélecteurs utilisables en CSS.

    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 à l'intérieur d'une directive @scope.
::part()
Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).