:empty CSS sélecteur

Définition de la CSS :empty.

La pseudo-classe CSS :empty permet de cibler toutes les balises HTML ou XHTML vides afin de lui assigner des propriétés CSS.

Exemple de syntaxe CSS :empty :

:empty{
  /* Propriétés */
}
selecteur:empty{
  /* Propriétés */
}

Une balise vide est considérée comme vide :

si elle est sans espace entre la balise de début et la balise de fin.
si c'est une balise simple, pas besoin de balise de fin comme input.

Exemple de code HTML :

<span></span> sera sélectionnée
<input type="text" value="22"> sera sélectionnée
<span> </span> ne sera pas sélectionnée
<span>&nbsp;</span> ne sera pas sélectionnée

Exemple de code :empty CSS

Problème d'interprétation de :empty en Css.

La pseudo-classe de feuille de style :empty CSS n'est pas reconnue par Internet Explorer < 9, Safari < 3.1 (problème quand elle est associée à :before) et Firefox < 1.8.

Règles de syntaxes CSS pour :empty.

Info complémentaire sur le sélécteur Css :empty

Attention, la pseudo-classe CSS ":empty" a une écriture un peu spéciale, "empty" est toujours précédée de ":".

La pseudo-classe CSS :empty ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "STYLE" de votre page :

Exemple d'écriture CSS :empty dans une balise STYLE

<STYLE>
  input:empty{}
</STYLE>

Attention à l'écriture du sélécteur Css :empty

La pseudo-classe CSS :empty s'applique sur tous les éléments vides. Vous pouvez donc si nécessaire mettre un sélecteur devant pour un ciblage plus précis, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML acceptant :empty.

Dans le cas ci-dessous l'identifiant est collé à ":". Dans ce cas nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML qui ont "identifiant".

Code CSS :

.identifiant:empty{ /* Propriétés css */ }
#identifiant:empty{ /* Propriétés css */ }

Dans le cas ci-dessous l'identifiant est espacé de ":". Dans ce cas nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML dont le parent direct ou indirect est "identifiant".

Exemple de code :

.identifiant :empty{ /* Propriétés css */ }
#identifiant :empty{ /* Propriétés css */ }

Compatibilités navigateurs du sélecteur :empty

Détails des versions de la CSS :empty: Sélecteur :empty est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS :empty: Sélecteur CSS :empty est compatible à partir de Chrome 1; Sélecteur CSS :empty est compatible à partir de Firefox 1; Sélecteur CSS :empty est compatible à partir de Internet Explorer 9; Sélecteur CSS :empty est compatible à partir de Opera 9.5; Sélecteur CSS :empty est compatible à partir de Safari 3.1

Votre avis sur la définition :empty en CSS

Votez pour la définition CSS `:empty`

Votes: 4.4 / 5 - 10 votes
Cliquez sur une étoile pour voter.