Pseudo-classe CSS :nth-last-of-type()
La pseudo-classe :nth-last-of-type() sélectionne des éléments en fonction de leur index, en partant du dernier élément vers le début.
La pseudo-classe :nth-last-of-type() peut être spécifiée par un nombre, un mot-clé ou une formule.
| Valeur | Description |
|---|---|
number | Correspond au nième élément exact à partir de la fin. |
odd / even | Correspond aux éléments aux positions impaires ou paires à partir de la fin. |
an + b | Correspond aux éléments aux positions calculées par la formule an + b, où a et b sont des entiers et n est un compteur commençant à 0. |
La pseudo-classe :nth-last-of-type() est similaire à :nth-of-type(), mais il existe une différence : elle compte les éléments à partir de la fin, tandis que :nth-of-type() les compte à partir du début.
Cette pseudo-classe est également similaire à :nth-last-child, mais elles diffèrent dans ce qu’elles sélectionnent : :nth-last-of-type() cible un type d’élément spécifique parmi ses frères et sœurs, tandis que :nth-last-child() correspond à n’importe quel type d’élément à la position donnée. Les deux ont la même spécificité.
Version
Syntaxe
Syntaxe CSS :nth-last-of-type()
:nth-last-of-type( <nth> ) {
css declarations;
}Exemple de la pseudo-classe :nth-last-of-type() :
Exemple de code CSS :nth-last-of-type()
<!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>Exemple de la pseudo-classe :nth-last-of-type() avec "odd" et "even" :
Autre exemple de code CSS :nth-last-of-type()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-last-child(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>Exemple de la pseudo-classe :nth-last-of-type() avec une formule (an + b) :
Exemple HTML/CSS de la pseudo-classe :nth-last-of-type() avec une formule (an + b)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3n+0) {
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 eight paragraph.</p>
<p>The ninth paragraph.</p>
</body>
</html>Practice
Quelle est la fonction de la pseudo-classe CSS :nth-last-of-type ?