:nth-last-child

Sumari

La pseudo-class CSS :nth-last-child(an+b) coincideix amb un element que té an+b-1 germans darrere d'ell en l'arbre del document, per a un determinat valor positiu o zero de n, i té un element pare.

En efecte, funciona igual que : nth-child excepte que selecciona els elements comptant cap enrere des del final de la sèrie d'elements, no l'inici.

Veure :nth-child per a una descripció més detallada de la sintaxi del seu argument.

Sintaxi

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

Exemples

Exemple de selectors

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

Coincideix amb les últimes quatre files d'una taula HTML.

span:nth-last-child(even)

Coincideix amb els elements fins i tot el del seu element pare, comencen en l'últim element i anant cap a enrere.

Ùs

Aquest CSS ...

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

... amb aquest HTML ...

<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
       <td>Second line</td>
    </tr>
    <tr>
       <td>Third line</td>
    </tr>
    <tr>
       <td>Fourth line</td>
    </tr>
    <tr>
       <td>Fifth line</td>
    </tr>
  </tbody>
</table>

... dona com a resultat:

Especificacions

Navegadors compatibles

Veure

• :nth-child