:nth-last-child

La pseudo-classe :nth-last-child permet de cibler un élément qui possède an+b-1 nœud frères qui le suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0.

Cette pseudo-classe fonctionne comme :nth-child mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir :nth-child.

Syntaxe

:nth-last-child( <an-plus-b> [ of <selector># ]? ) { style properties }
où 
<an-plus-b> = An+B | even | odd

Exemples

Exemples

tr:nth-last-child(-n+4)

Permettra de cibler les quatre dernières lignes d'un tableau.

span:nth-last-child(even)

Permettra de cibler tous les éléments <span> pairs en partant de la fin.

Exemple appliqué

CSS

table {
  border:1px solid blue;
}
tr:nth-last-child(-n+3) { /* les trois derniers enfants */
  background-color: lime;
}

HTML

<table>
  <tbody>
    <tr>
      <td>Première ligne</td>
    </tr>
    <tr>
       <td>Deuxième ligne</td>
    </tr>
    <tr>
       <td>Troisième ligne</td>
    </tr>
    <tr>
       <td>Quatrième ligne</td>
    </tr>
    <tr>
       <td>Sixième ligne</td>
    </tr>
  </tbody>
</table>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• :nth-child