O :nth-childseletor permite que você selecione um ou mais elementos com base em sua ordem de origem, de acordo com uma fórmula.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )É 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 estejamos construindo uma grade CSS e desejamos remover a margem em cada quarto módulo da grade. Aqui está esse HTML:
One Two Three Four Five Em vez de adicionar uma classe a cada quarto item (por exemplo .last), podemos usar :nth-child:
.module:nth-child(4n) ( margin-right: 0; )O :nth-childselector tem um argumento: este pode ser um único inteiro, as palavras-chave even, oddou 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 os elementos correspondentes - semelhante a itens de navegação em uma matriz 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 quarto elemento com a fórmula 4n, que funcionou porque cada vez que um elemento era verificado, “n” aumentava em um (4 × 0, 4 × 1, 4 × 2, 4 × 3, etc). Se a ordem de um elemento corresponder ao resultado da equação, ele será selecionado (4, 8, 12, 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-childseletores válidos :
Felizmente, você nem sempre precisa fazer as contas sozinho - existem vários :nth-childtestadores e geradores por aí:
- Testador de truques CSS
- Testador de Lea Verou
: enésimo filho (an + b de)
Há um filtro pouco conhecido que pode ser adicionado de :nth-childacordo com a especificação dos seletores CSS: A capacidade de selecionar o :nth-childde um subconjunto de elementos, usando o of formato. Suponha que você tenha uma lista de conteúdo misto: alguns têm a classe .video, alguns têm a classe .picturee você deseja selecionar as três primeiras imagens. Você poderia fazer isso com o filtro “de” assim:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Observe que isso é diferente de anexar um seletor diretamente ao :nth-childseletor:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Isso pode ficar um pouco confuso, então um exemplo pode ajudar a ilustrar a diferença:
O suporte do navegador para o filtro “de” é muito limitado: no momento em que este livro foi escrito, apenas o Safari suportava a sintaxe. Para verificar o status do seu navegador favorito, aqui estão os problemas em aberto relacionados a :nth-child(an+b of s):
- Firefox: suporte para enésimo filho (An + B de sel)
- Chrome: Implementar: enésimo filho (an + b de S)
Pontos de interesse
:nth-childitera por meio de elementos começando do topo da ordem de origem. A única diferença entre ele e:nth-last-childé que o último itera por meio de elementos começando na parte inferior da ordem de origem.- A sintaxe para selecionar o primeiro
nnúmero de elementos é um pouco contra-intuitiva. Você começa com-n, mais o número positivo de elementos que deseja selecionar. Por exemplo,li:nth-child(-n+3)selecionará os 3 primeiroslielementos. - O
:nth-childseletor é muito semelhante,:nth-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.moduleelementos, 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-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 |
|---|---|---|---|---|---|---|
| Nenhum | 3,2+ | Nenhum | 9,5+ | 9+ | Nenhum | Nenhum |
:nth-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.