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 :first-of-type and :last-of-type de Sara Cope dans CodePen

Voir également la page de MDN