W3docs
fr
Se connecter

CSS :nth-last-of-type() Pseudo-classe

La pseudo-classe CSS :nth-last-of-type() sélectionne des éléments en partant du dernier. Découvrez-la avec des exemples pratiques.

La pseudo-classe CSS :nth-last-of-type() correspond aux éléments d'un type donné, en comptant à partir du dernier élément de ce type parmi ses frères et sœurs. C'est le miroir de :nth-of-type(), qui compte à partir du premier.

Cela est utile lorsque le nombre d'éléments est inconnu ou change dynamiquement et que vous devez styliser des éléments par rapport à la fin d'une liste — par exemple, mettre en évidence les dernières lignes d'un tableau ou les derniers éléments d'un menu de navigation, quel que soit le nombre de ceux qui les précèdent.

Syntaxe

La pseudo-classe accepte un seul argument entre les parenthèses : un nombre, un mot-clé ou une formule.

:nth-last-of-type( <nth> ) {
  /* style declarations */
}
ValeurDescription
numberCorrespond exactement au n-ième élément de son type, en comptant à partir de la fin (1 = le dernier).
odd / evenCorrespond aux éléments aux positions impaires ou paires comptées à partir de la fin.
an + bCorrespond à chaque a-ième élément en commençant à l'offset b, en comptant à partir de la fin. a et b sont des entiers et n prend les valeurs 0, 1, 2, ….

Comment fonctionne la formule an + b

Le navigateur substitue n = 0, 1, 2, … dans la formule et conserve chaque position qu'elle produit. Le comptage commence toujours au dernier élément du type correspondant :

  • 2n (identique à even) → positions 2, 4, 6, … à partir de la fin.
  • 2n + 1 (identique à odd) → positions 1, 3, 5, … à partir de la fin.
  • 3n + 1 → positions 1, 4, 7, … à partir de la fin.
  • -n + 3 → les trois derniers éléments (positions 3, 2, 1 à partir de la fin).

Différences avec les sélecteurs apparentés

  • :nth-of-type() compte les mêmes éléments correspondants mais commence par le début au lieu de la fin.
  • :nth-last-child() compte également à partir de la fin, mais prend en compte tous les éléments frères, et non uniquement ceux du même type. :nth-last-of-type() ignore les frères et sœurs d'autres types lors du comptage. Les deux ont une spécificité identique.

Voir aussi :last-of-type, qui est équivalent à :nth-last-of-type(1).

Exemples

Sélectionner une position exacte à partir de la fin

Ici, :nth-last-of-type(3) sélectionne le troisième paragraphe compté à partir de la fin — c'est-à-dire « Paragraph 4 » dans une liste de six.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>
Essayez vous-même »

Utiliser les mots-clés odd et even

En comptant à partir de la fin, odd correspond aux 1er, 3e, 5e, … paragraphes (soit « Paragraph 6 », « Paragraph 4 », « Paragraph 2 »), et even correspond aux 2e, 4e, 6e, … (« Paragraph 5 », « Paragraph 3 », « Paragraph 1 »). Ensemble, ils stylisent chaque paragraphe en deux couleurs alternées.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-last-of-type(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>
Essayez vous-même »

Utiliser une formule (an + b)

Avec neuf paragraphes, 3n + 1 correspond à chaque troisième paragraphe en comptant à partir de la fin — positions 1, 4 et 7 à partir de la fin, c'est-à-dire les 9e, 6e et 3e paragraphes dans l'ordre du document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3n+1) {
        background: #767fea;
        padding: 10px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>The fifth paragraph.</p>
    <p>The sixth paragraph.</p>
    <p>The seventh paragraph.</p>
    <p>The eighth paragraph.</p>
    <p>The ninth paragraph.</p>
  </body>
</html>
Essayez vous-même »

Sélectionner les N derniers éléments

Un coefficient négatif est la manière idiomatique de cibler les derniers éléments. -n + 3 correspond aux trois derniers paragraphes, quel que soit le nombre total :

p:nth-last-of-type(-n + 3) {
  font-weight: bold;
}

Compatibilité des navigateurs et spécification

:nth-last-of-type() est pris en charge par tous les navigateurs modernes. Il est défini dans :

Pratique

Pratique
Quelle est la fonction de la pseudo-classe CSS :nth-last-of-type ?
Quelle est la fonction de la pseudo-classe CSS :nth-last-of-type ?
Was this page helpful?