pseudo-classe CSS :nth-last-child() seleciona um ou mais elementos com base em sua posição entre um grupo de elementos-irmãos, contando a partir do último.

/* Seleciona todo quarto elemento
   em qualquer grupo de irmãos,
   contando do último para o primeiro */
:nth-last-child(4n) {
  color: lime;
}

Nota: Essa pseudo-classe é essencialmente o mesmo que usar :nth-child, porém conta os itens de trás para a frente, e não do início para o final.

Sintaxe

A pseudo-classe nth-last-child é especificada com um único argumento, que representa o padrão para elementos correspondentes, contando do final.

Valores chave

odd
Representa elementos cuja posição numérica em uma série de irmãos é ímpar: 1, 3, 5, etc., contando do final. 
even
Representa elementos cuja posição numérica em uma série de irmãos é par: 2, 4, 6, etc., contando do final.

Notação funcional

<An+B>
Representa elementos cuja posição numérica em uma série de irmãos corresponde ao padrão An+B, para cada valor de n que seja um número inteiro positivo ou zero. O índice do primeiro elemento, contando do final, é 1.  Os valores A e B devem ambos ser <integer>s (inteiros).

Sintaxe formal

:nth-last-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

Exemplos

Seletores de exemplo

tr:nth-last-child(odd) ou tr:nth-last-child(2n+1)
Representa as linhas ímpares de uma tabela HTML: 1, 3, 5, etc., contando do final.
tr:nth-last-child(even) ou tr:nth-last-child(2n)
Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc., contando do final.
:nth-last-child(7)
Representa o sétimo elemento, contando do final.
:nth-last-child(5n)
Representa elementos 5, 10, 15, etc., contando do final.
:nth-last-child(3n+4)
Representa elementos 4, 7, 10, 13, etc., contando do final.
:nth-last-child(-n+3)
Representa os últimos três elementos em um grupo de irmãos.
p:nth-last-child(n)
Representa cada elemento <p> em um grupo de irmãos. Isso é o mesmo que um simples seletor p.
p:nth-last-child(1) ou p:nth-last-child(0n+1)
Representa cada <p> que seja o primeiro elemento em um grupo de irmãos, contando do final. Isso é o mesmo que o seletor :last-child.

Exemplo de tabela

HTML

<table>
  <tbody>
    <tr>
      <td>Primeira linha</td>
    </tr>
    <tr>
      <td>Segunda linha</td>
    </tr>
    <tr>
      <td>Terceira linha</td>
    </tr>
    <tr>
      <td>Quarta linha</td>
    </tr>
    <tr>
      <td>Quinta linha</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid blue;
}

/* Seleciona os últimos três elementos */
tr:nth-last-child(-n+3) {
  background-color: pink;
}

Resultado

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':nth-last-child' in that specification.
Rascunho atual Elementos correspondentes não precisam ter um elemento-pai.
Selectors Level 3
The definition of ':nth-last-child' in that specification.
Recomendação Definição inicial.

Compatibilidade de browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Funcionalidade Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 4 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
Não precisa de pai 57 ? 51 (51)[1] ? 44 ?
Funcionalidade Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico (Yes) (Yes) (Yes) 1.0 (1.9.1) 9.0 10 3.2
Não precisa de pai 57 57 ? 51.0 (51)[1] ? 44 ?

[1] Ver bug 1300374.

Ver também

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: larimaza
 Última atualização por: larimaza,