La Cascade

Rechercher

:last-of-type

par Sara Cope, 23 juillet 2022, css, pseudo-classes, article original paru le 1er juin 2022 dans CSS-Tricks

La pseudo-classe last-of-type cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.


Le sélecteur :last-of-type nous permet de cibler la dernière occurrence d'un élément à l'intérieur de son élément parent. Il est défini dans la spécification Selectors Level 4 comme une "pseudo-classe structurelle", c'est à dire qu'il est utilisé pour ajouter un style à un contenu en fonction de sa relation avec son élément parent ou ses éléments frères.

Admettons que nous ayons un article qui comporte un titre, plusieurs paragraphes et une image :

<article>
  <h1>Un Titre</h1>

  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
  <p>Paragraphe 3</p>
  <img src="..." />
</article>

Nous voulons que le dernier paragraphe soit affiché en plus petit, pour apparaître comme une conclusion (comme une note du rédacteur). Plutôt que de l'associer à une classe, nous pouvons utiliser :last-of-type pour le sélectionner :

p:last-of-type {
  font-size: 0.75em;
}

:last-of-type fonctionne à peu près comme :nth-of-child mais avec une différence essentielle : il est moins spécifique. Dans l'exemple qui précède, si nous avions utilisé p:nth-last-child(1), il ne se serait rien passé car le paragraphe n'est pas le dernier enfant de son élément parent. C'est là qu'apparaît la puissance de :last-of-type : il cible un type particulier d'élément dans un arrangement spécifique, en relation avec des enfants similaires, plutôt qu'avec tos les enfants.

L'exemple plus complexe qui suit montre l'utilisation de :last-of-type et d'une pseudo-classe qui lui ressemble, :first-of-type.

Voir également la page de MDN

Voir la liste des articles de Sara Cope traduits dans La Cascade.
article original paru le 1er juin 2022 dans CSS-Tricks
Traduit avec l'aimable autorisation de CSS-Tricks et de Sara Cope.
Copyright CSS-Tricks © 2022