O :nth-last-of-typeseletor 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-of-typeexceto que seleciona itens começando na parte inferior da ordem de origem, não na parte superior.
Suponha que temos uma lista não ordenada 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-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Como você pode ver, :nth-last-of-typeleva 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 é selecionado - mas as palavras-chave ou uma fórmula iterarão por todos os filhos do elemento pai e selecionarão os elementos correspondentes - semelhante a itens de navegação em uma matriz em JavaScript. As palavras-chave “pares” e “ímpares” são diretas (2, 4, 6, etc. ou 1, 3, 5 etc., 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 :
Veja os truques da caneta CSS:: nth-last-of-type de Chris Coyier (@chriscoyier) no CodePen.
Felizmente, você nem sempre precisa fazer as contas sozinho - existem vários :nth-last-of-typetestadores e geradores por aí:
- Testador de truques CSS
- Testador de Lea Verou
Pontos de interesse
:nth-last-of-typeitera por meio de elementos começando na parte inferior do pedido de origem. A única diferença entre ele e:nth-of-typeé que o último itera por meio de elementos começando na parte inferior da ordem de origem.- O
:nth-last-of-typeseletor é muito semelhante,:nth-last-childmas com uma diferença crítica: é mais específico. Em nosso exemplo acima, eles produziriam o mesmo resultado porque estamos iterando apenas sobre oslielementos, 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-of-type-it almeja um tipo específico de elemento em um arranjo em relação a irmãos semelhantes, nem todos os irmãos.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | 3,2+ | Funciona | 9,5+ | 9+ | Funciona | Funciona |
:nth-last-of-typefoi 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.