:nth-child avançado: fórmulas de posição
Uma tabela com listras zebradas, ou uma grade onde só o terceiro item de cada trinca ganha destaque, não precisa de uma classe extra em cada elemento: existe uma fórmula para isso.
Estudar esta lição interativa →:nth-child() aceita uma fórmula no formato an+b, onde n começa em 0 e sobe (0, 1, 2, 3...), e o navegador calcula uma posição para cada valor de n. Não é preciso decorar a álgebra: alguns padrões cobrem praticamente todo uso do dia a dia.
nth-child(2n) ou (even)
Seleciona as posições pares: 2ª, 4ª, 6ª... A base do 'zebra striping' de tabelas e listas.
nth-child(2n+1) ou (odd)
Seleciona as posições ímpares: 1ª, 3ª, 5ª... O complemento do padrão acima.
nth-child(3n)
Seleciona a cada três: 3ª, 6ª, 9ª... Útil para destacar todo terceiro item de uma grade.
nth-child(-n+3)
Seleciona só as três primeiras posições: 1ª, 2ª e 3ª, e para por aí. Ótimo para destacar 'os 3 primeiros' sem contar manualmente.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Lista com nth-child(even) fazendo o zebra striping clássico; grade com nth-child(3n) destacando a cada terceiro item.
A especificação de :nth-child() ganhou recentemente uma extensão, :nth-child(2n+1 of .destaque), que filtra a contagem só entre elementos que também batem com outro seletor. É um recurso real e cada vez mais suportado, mas nem todo ambiente (incluindo o corretor automático deste curso) já resolve essa sintaxe de forma confiável, então ela fica de fora dos exercícios corrigidos por enquanto: conheça o conceito, mas valide sempre num navegador atualizado antes de depender dela num projeto real.
:nth-child(2) conta a posição do elemento entre todos os irmãos, de qualquer tag. Se o segundo filho de um contêiner for uma div e não um p, p:nth-child(2) não seleciona nenhum parágrafo, porque nenhum p está na 2ª posição entre os irmãos. :nth-of-type(2), ao contrário, conta só entre irmãos da mesma tag, ignorando os outros tipos. Se um seletor de posição parece "não pegar" o elemento certo, confira qual dos dois é o adequado ao caso.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione a regra :nth-child(even).