:empty

Le pseudo sélecteur :empty cible les éléments qui soit ne contiennent rien, soit ne contiennent qu'un commentaire HTML.

//CSS
div:empty {
   display: none;
}

Ciblera :

//HTML
<div></div>

<div><!-- test --></div>

Ne ciblera PAS  :

//HTML
<div> </div>

<div>
  <!-- test -->
</div>

<div>
</div>

<div>

Il est utile pour cacher des éléments vides qui pourraient créer des espacements bizarres (par exemple s'ils ont un padding). Ou pour supprimer les bordures de la cellule supérieure gauche d'un tableau.


À lire également dans La Cascade :

:empty, une pseudo-classe pas si vide, de Dudley Storey

Autres ressources à consulter sur ce sujet :

Can I use?

Autres articles intéressants :

articles en anglais :

Un exemple d'utilisation de :empty, par Katy Decorah


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.