:nth-last-of-type
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La fonction de pseudo-classe CSS :nth-last-of-type permet de cibler les éléments selon leur position parmi les voisins qui sont du même type (les mêmes balises) en partant de la fin.
Exemple interactif
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:nth-last-of-type(3n) {
border: 2px solid orange;
}
<dl>
<dt>Légumes :</dt>
<dd>1. Tomates</dd>
<dd>2. Concombres</dd>
<dd>3. Champignons</dd>
<dt>Fruits :</dt>
<dd>4. Pommes</dd>
<dd>5. Mangues</dd>
<dd>6. Poires</dd>
<dd>7. Oranges</dd>
</dl>
Syntaxe
css
:nth-last-of-type(<An+B> | even | odd) {
/* ... */
}
Paramètres
La pseudo-classe nth-last-of-type prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.
Voir :nth-last-child pour une explication plus détaillée de sa syntaxe.
Exemples
HTML
html
<div>
<span>Ce span est le premier !</span>
<span>Ce span ne l'est pas. :(</span>
<em>Celui-ci est bizarre.</em>
<span>Celui-ci l'est !</span>
<strike>C'est un autre type</strike>
<span>Malheureusement, celui-ci ne l'est pas.</span>
</div>
CSS
css
span:nth-last-of-type(2) {
background-color: lime;
}
Résultat
Spécifications
| Specification |
|---|
| Selectors Level 4 # nth-last-of-type-pseudo |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:nth-last-child - La pseudo-classe
:nth-of-type