:last-child

Le sélecteur :last-child vous permet de cibler le dernier élément directement à l'intérieur de son élément contenant. Il est défini dans la spécification CSS Selectors Level 3 comme une pseudo-classe structurelle, c'est à dire qu'il est utilisé pour appliquer un style à du contenu en fonction de sa relation avec les contenus parents et frères.

Admettons que nous ayons un article et que nous voulions que notre dernier paragraphe soit plus petit, pour apparaître comme une conclusion (comme une note du rédacteur) :

//HTML
<article>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
  <p>Last paragraph...</p>
</article>

Plutôt que d'utiliser une classe (par exemple .dernier), nous pouvons nous servir de :last-child pour sélectionner notre paragraphe :

//CSS
p:last-child {
  font-size: 0.75em;
}

L'utilisation de :last-child est similaire à celle de :last-of-type mais avec une différence essentielle : il est moins spécifique. :last-child va chercher le tout dernier enfant d'un élément parent, alors que :last-of-type va chercher la dernière occurrence de l'élément spécifié, même s'il n'est pas le tout dernier dans le HTML. Dans l'exemple qui précède, le résultat serait le même parce que le dernier élément d'article se trouve être également le dernier élément p. Cela montre la puissance de :last-child : il peut identifier un élément à tous ses frères (siblings) et non pas seulement à ses frères du même type.

L'exemple plus complet ci-dessous montre l'utilisation de :last-child et d'une pseudo-classe proche, :first-child.

See the Pen CSS-Tricks: :first-child and :last-child by Zachary Kain (@zakkain) on CodePen.


À lire également dans La Cascade :

Combinateurs et pseudo-classes, de Steven Bradley

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :


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.