La pseudo-classe CSS :empty

J’ai récemment eu besoin de donner un style à un élément d’information sur une application. Cet élément ne devait apparaître qu’à un certain moment sur la page (lorsqu’il avait du contenu) et donc être invisible à d’autres moments.

Tout d’abord, la première solution qui m’est venue à l’esprit était d’ajouter une classe à l’élément en utilisant JavaScript ou PHP puis d’écrire le style correspondant suivant l’état de l’élément. Malheureusement, dans mon cas, impossible d’ajouter des classes de cette manière.

Ensuite, je me suis rappelé avoir déjà vu une pseudo-classe :empty (Ce qui signifie vide en anglais).

La pseudo-classe :empty a été introduite en CSS3 et est définie sur le MDN comme « correspond(ant) à un élément qui n’a aucun enfant. » Elle s’adapte donc parfaitement au cas qui m’occupait.

La définition de la pseudo-classe est plutôt limpide mais quelques précisions sont nécessaires. Par un élément qui n’a aucun enfant, il faut effectivement qu’il n’y ait rien à l’intérieur des balises (pas d’enfants donc pas d’éléments HTML), un espace compte pour un contenu par exemple. Seuls les commentaires peuvent prendre place comme contenu et ne pas gêner l’application des styles de la pseudo classe.

Pour que cela soit plus parlant, voici quelques exemples et si la pseudo-classe peut s’y appliquer :

<div></div> <!-- OK -->
<div><p>lorem ipsum</p></div> <!-- KO -->
<div>
</div> <!-- KO -->
<div><!-- commentaire --></div> <!-- OK -->

Pour conclure, cette pseudo-classe, toute simple en apparence peut rendre service et éviter l’utilisation d’autres méthodes pour donner ou retirer du style s’appliquant à certains éléments.

Il faut noter que dans la spécification niveau 4 de CSS, les espaces blancs ne seront plus considérés comme du contenu et la pseudo-classe :empty s’appliquera aussi dans ce cas-là.