Pseudo-classe nth-last-of-type
La pseudo-classe nth-last-of-type sélectionne
un élément qui est le n-ième enfant
du parent d'un type donné, en comptant depuis la fin.
Elle se comporte de manière similaire à nth-of-type,
mais le comptage se fait depuis la fin.
Syntaxe
sélecteur:nth-last-of-type(nombre | odd | even | expression) {
}
Valeurs
| Valeur | Description |
|---|---|
| nombre |
Un nombre positif à partir de 1.
Spécifie le numéro de l'élément auquel nous voulons
accéder. La numérotation des éléments commence à 1.
|
odd |
Les éléments impairs. |
even |
Les éléments pairs. |
| expression |
Il est possible de composer des expressions spéciales avec la lettre n,
qui représente tous les nombres entiers à partir de zéro (et non pas un)
jusqu'à l'infini. Ainsi, 2n signifie tous les nombres pairs
(à partir du deuxième).
Comment comprendre cela ? Nous substituons dans n séquentiellement
les nombres à partir de 0 et ainsi de suite : si n = 0, alors 2n donnera 0 -
un tel élément n'existe pas (la numérotation des éléments commence à 1),
si n = 1, alors 2n donnera 2 - le deuxième élément, si n = 2,
2n donne 4 - le quatrième élément. Si on écrit 3n - ce sera
chaque troisième élément (à partir du troisième), et ainsi de suite.
|
Exemple
Trouvons le h2 qui est le 2-ième h2
dans le parent en comptant depuis la fin :
<div>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Exemple
Trouvons tous les h2 pairs en comptant depuis la fin :
<div>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Exemple
Trouvons tous les h2 impairs en comptant depuis la fin :
<div>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
<h2>titre</h2>
<p>paragraphe</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
