: enésimo filho - CSS-Tricks

O :nth-last-childseletor permite selecionar um ou mais elementos com base em sua ordem de origem, de acordo com uma fórmula. É definido nas especificações dos seletores CSS de nível 3 como uma “pseudoclasse estrutural”, o que significa que é usado para estilizar o conteúdo com base em seu relacionamento com os elementos pai e irmão. Ele funciona da mesma forma que, :nth-childexceto que seleciona itens começando na parte inferior da ordem de origem, não na parte superior.

Suponha que temos uma lista com um número desconhecido de itens e desejamos destacar o penúltimo item (neste exemplo exato, o “Quarto Item”):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

Em vez de fazer algo como adicionar uma classe ao item da lista (por exemplo .highlight), podemos usar :nth-last-child:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )

Como você pode ver, :nth-last-childleva um argumento: pode ser um único inteiro, as palavras-chave “par” ou “ímpar” ou uma fórmula. Se um inteiro for especificado, apenas um elemento será selecionado - mas as palavras-chave ou uma fórmula irão iterar por todos os filhos do elemento pai e selecionar elementos correspondentes - semelhante a itens de navegação em uma matriz em JavaScript. Palavras-chave “pares” e “ímpares” são diretas (2, 4, 6 etc ou 1, 3, 5 respectivamente). A fórmula é construída usando a sintaxe an+b, onde:

“A” é um valor inteiro
“N” é a letra literal “n”
“+” É um operador e pode ser “+” ou “-”
“B” é um número inteiro e é necessário se um operador for incluído na fórmula

É importante notar que esta fórmula é uma equação e itera através de cada elemento irmão, determinando qual será selecionado. A parte “n” da fórmula, se incluída, representa um conjunto de números inteiros positivos crescentes (como na iteração por meio de uma matriz). Em nosso exemplo acima, selecionamos cada segundo elemento com a fórmula 2n, que funcionou porque cada vez que um elemento era verificado, “n” aumentava em um (2 × 0, 2 × 1, 2 × 2, 2 × 3, etc). Se a ordem de um elemento corresponder ao resultado da equação, ele será selecionado (2, 4, 6, etc.). Para obter uma explicação mais aprofundada da matemática envolvida, leia este artigo.

Para ilustrar melhor, aqui estão alguns exemplos de :nth-last-of-typeseletores válidos :

Confira esta Caneta!

Felizmente, você nem sempre precisa fazer as contas sozinho - existem vários :nth-last-childtestadores e geradores por aí:

Testador de truques CSS
Testador de Lea Verou

Pontos de interesse

:nth-last-childitera por meio de elementos começando na parte inferior do pedido de origem. A única diferença entre ele e :nth-childé que o último itera por meio de elementos começando do topo da ordem de origem.
O :nth-last-childseletor é muito semelhante, :nth-last-of-typemas com uma diferença crítica: é menos específico. Em nosso exemplo acima, eles produziriam o mesmo resultado porque estamos iterando apenas sobre os lielementos, mas se estivéssemos iterando sobre um grupo mais complexo de irmãos, :nth-last-childtentaríamos corresponder todos os irmãos, não apenas irmãos do mesmo tipo de elemento. Isso revela o poder de :nth-last-child-it pode selecionar qualquer elemento irmão em um arranjo, não apenas elementos que são especificados antes dos dois pontos.

Suporte para navegador

cromada	Safári	Raposa de fogo	Ópera	IE	Android	iOS
Funciona	3,2+	Funciona	9,5+	9+	Funciona	Funciona

:nth-last-childfoi introduzido no Módulo 3 dos seletores CSS, o que significa que as versões antigas dos navegadores não o suportam. No entanto, o suporte do navegador moderno é impecável, e os novos pseudo-seletores são amplamente usados em ambientes de produção. Se você precisar de suporte a um navegador mais antigo, use polyfill para IE ou use esses seletores de maneiras não críticas à melhoria progressiva, que é recomendada.