O :nth-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.
Suponha que temos uma lista não ordenada e desejamos "tarja zebra" itens de lista alternados:
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Em vez de adicionar classes a cada item da lista (por exemplo, .even& .odd), podemos usar :nth-of-type:
li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )Como você pode ver, :nth-of-typeleva um argumento: pode ser um único inteiro, as palavras-chave “par” ou “ímpar”, ou uma fórmula como mostrado acima. 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. As palavras-chave “par” e “ímpar” são diretas, mas 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-of-typeseletores válidos :
Felizmente, você nem sempre precisa fazer as contas sozinho - existem vários :nth-of-typetestadores e geradores por aí:
- Testador de truques CSS
- Testador de Lea Verou
Pontos de interesse
:nth-of-typeitera por meio de elementos começando do topo da ordem de origem. A única diferença entre ele e:nth-last-of-typeé que o último itera por meio de elementos começando na parte inferior da ordem de origem.- O
:nth-of-typeseletor é muito semelhante,:nth-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-childtentaríamos corresponder todos os irmãos, não apenas irmãos do mesmo tipo de elemento. Isso revela o poder de:nth-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-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.