mozilla

:nth-last-child

Résumé

La pseudo-classe CSS :nth-last-child ciblent un élément qui a an+b-1 nœud frères à la fin de l'élément parent, pour une valeur postive ou égale à 0 de n.

C'est comme :nth-child sauf que l'on part de la fin. Voir :nth-child pour plus d'information sur la syntaxe des arguments.

Syntaxe

element:nth-last-child(an + b) { propriétés CSS }

Exemples

tr:nth-last-child(-n+4)
Correspond aux quatre dernières lignes d'un tableau HTML
span:nth-last-child(even)
Correspond à tous les éléments span pairs en partant de la fin.

Exemple d'utilisation :

Le CSS ...

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

... avec le code HTML suivant ...

<table>
  <tbody>
    <tr>
      <td>1ere ligne</td>
    </tr>
    <tr>
       <td>2eme ligne</td>
    </tr>
    <tr>
       <td>3eme ligne</td>
    </tr>
    <tr>
       <td>4eme ligne</td>
    </tr>
    <tr>
       <td>5eme ligne</td>
    </tr>
  </tbody>
</table>

... donnera :

Spécifications

Spécification Statut Commentaire
Selectors Level 4
La définition de ':nth-last-child' dans cette spécification.
Version de travail Aucun changement.
Selectors Level 3
La définition de ':nth-last-child' dans cette spécification.
Recommendation Première définition.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 4.0 3.5 (1.9.1) 9.0 9.5 3.2
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 1.0 (1.9.1) 9.0 10.0 3.2

Voir également

:nth-child

Étiquettes et contributeurs liés au document

Contributeurs à cette page : teoli, the prisoner, tregagnon, FredB, loicbourg
Dernière mise à jour par : loicbourg,