W3docs
fr
Se connecter

Pseudo-classe CSS :last-of-type

La pseudo-classe CSS :last-of-type sélectionne le dernier élément de son type parmi ses frères et sœurs. Exemples pratiques inclus.

La pseudo-classe CSS :last-of-type sélectionne un élément qui est le dernier élément de son type parmi les enfants de son parent. « Type » désigne ici le nom de balise de l'élément — ainsi, p:last-of-type cible le dernier <p> à l'intérieur de son parent, quel que soit le nombre d'autres éléments (divs, titres, spans) qui le suivent.

Cette page explique ce que :last-of-type cible, sa syntaxe, son comportement sur différents types d'éléments, et — surtout — en quoi il diffère de la pseudo-classe similaire :last-child.

La pseudo-classe :last-of-type est équivalente à :nth-last-of-type(1) et sélectionne exactement le même élément.

Quand l'utiliser

Utilisez :last-of-type lorsque vous souhaitez styliser le dernier élément d'une balise donnée sans dépendre de sa position exacte. Cas d'utilisation courants :

  • Supprimer la marge ou la bordure inférieure du dernier paragraphe d'une carte.
  • Styliser le dernier élément de liste, la dernière image ou la dernière section dans un conteneur qui mélange différents types d'éléments.
  • Cibler « le dernier de son espèce » lorsqu'on ne peut pas être certain qu'il est aussi le tout dernier enfant du parent.

Si vous avez besoin de l'élément qui est littéralement le dernier enfant du parent — quel que soit son type — utilisez :last-child. Voir la comparaison ci-dessous.

Version

Selectors Level 4

Selectors Level 3

Syntaxe

Syntaxe CSS de :last-of-type

:last-of-type {
  css declarations;
}

Exemple du sélecteur :last-of-type :

Exemple de code :last-of-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>
Essayez vous-même »

Cibler des éléments parents

Le sélecteur peut également être appliqué à des éléments parents.

Info

The * selector is implied when no type selector is specified (e.g., *:last-of-type is equivalent to :last-of-type).

Dans l'exemple ci-dessous, article:last-of-type stylise le dernier <article> parmi ses frères et sœurs. Notez que la pseudo-classe est évaluée par type au sein de chaque parent : les éléments <em> sont regroupés séparément des éléments <div> et <b>, de sorte que chaque balise possède son propre « dernier de son type ».

Exemple de ciblage d'un élément parent :

Pseudo-classe CSS :last-of-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article:last-of-type {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <article>
      <div>This "div" is first.</div>
      <div>This <span>nested "span" is last</span>!</div>
      <div>This <em>nested "em" is first</em>, but this <em>nested "em" is last</em>!</div>
      <b>This "b" qualifies!</b>
      <div>This is the final "div"!</div>
    </article>
  </body>
</html>
Essayez vous-même »

:last-of-type vs :last-child

Les sélecteurs :last-child et :last-of-type se ressemblent mais répondent à des questions différentes :

  • :last-child cible un élément uniquement s'il est le tout dernier enfant de son parent — la position compte, le type non.
  • :last-of-type cible le dernier élément d'un type donné, même si d'autres éléments le suivent.

Ainsi, p:last-of-type cible le dernier <p> même lorsqu'un <span> le suit, tandis que p:last-child ne correspondrait pas du tout à ce <p> (car le <span> est le véritable dernier enfant). Dans l'exemple ci-dessous, la règle s'applique au dernier paragraphe indépendamment des spans, tandis que span:last-child cible uniquement le dernier span — qui se trouve être le dernier enfant du body.

Exemple des sélecteurs CSS :last-of-type et :last-child :

Sélecteurs :last-of-type et :last-child

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eee;
      }
      span {
        display: block;
      }
      span:last-child {
        background: #8ebf42;
        font-style: italic;
        font-weight: bold;
        color: #eee;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type and :last-child selectors example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </body>
</html>
Essayez vous-même »

Points de vigilance

  • :last-of-type est limité à chaque parent : chaque élément parent possède son propre « dernier paragraphe », « dernier div », etc.
  • Il fonctionne uniquement sur les types d'éléments. Il n'existe pas d'équivalent basé sur les classes — .box:last-of-type signifie « le dernier élément dont le type correspond à l'élément qui possède aussi la classe box », et non « le dernier élément ayant la classe box ». Utilisez :last-child combiné à une classe, ou :nth-last-of-type(), pour un contrôle plus fin.
  • Si un parent ne possède qu'un seul élément d'un type donné, cet élément unique est à la fois son propre :last-of-type (et :first-of-type).

Sélecteurs associés

Exercice

Pratique
Que cible la pseudo-classe CSS :last-of-type ?
Que cible la pseudo-classe CSS :last-of-type ?
Was this page helpful?