Como eu posso acessar itens de 2 em 2 na minha lista usando o parâmetro :nth-child() ou se ficar mais fácil, acessar e customizar os itens pares?
2 Respostas
Você pode o seu pseudo seletor nth-child
acrescentando a regra de par ou ímpar (odd
ou 2n+1
e even
ou 2n
) para customizar os elementos.
Para customizar customizar os itens pares ficaria:
li:nth-child(even) {
// Seus estilos
}
Ou então:
li:nth-child(2n) {
// Seus estilos
}
Preparei um JSFiddle para observar esse comportamento: http://jsfiddle.net/6428n8zm/
Dê uma olhada na documentação desse pseudo-selecto para ver todas as possíveis combinações que poderá fazer: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child.
Para customizar somente os itens pares você utilizaria o seguinte pseudo-seletor,
li:nth-child(even){} ou li:nth-child(2n){}
Para customizar somente os itens ímpares você utilizaria este outro,
li:nth-child(odd){} ou li:nth-child(2n+1){}
A função que o pseudo-seletor nth-child
aceita é An+B
(sendo An
ou B
opcionais), como assim?
Quando você coloca o valor de (2n+1)
, automaticamente o CSS faz o cálculo, digamos que o n
assumisse o valor de 0
(zero), logo (2 * 0 + 1) = 1
(dois vezes zero é igual à zero, o resultado mais um é igual à um), então ele aplicaria os estilos declarados ao primeiro item da sua lista, logo em seguida o n
é incrementado e passa a ter o valor de 1
(um), logo (2 * 1 + 1) = 3
(dois vezes um é igual à dois, o resultado mais um é igual à três), então ele aplicaria os estilos declarados ao terceiro item da sua lista e assim por diante, sendo assim, a fórmula (2n+1)
seleciona os elementos ímpares.
Já a fórmula (2n)
irá fazer o mesmo processo, só que, sem a soma. Na primeira execução o n
assume o valor de 0
(zero), então o cálculo é feito: (2 * 0) = 0
(dois vezes zero é igual à zero), como não existe um item zero na lista, esse valor é desconsiderado e o n
é incrementado passando a valer 1
(um), logo (2 * 1) = 2
(dois vezes um é igual à dois), então os estilos declarados são aplicados ao item dois da sua lista e assim por diante, pelo fato de não ser acrescentado 1
ao resultado da multiplicação, o valor final será sempre um número par, fazendo com que a fórmula (2n)
somente selecione elementos pares.
Veja que para a fórmula (2n)
eu omiti o elemento B
da função. Todos dois elementos são opcionais, sendo assim eu posso omitir o elemento An
da função e declarar simplesmente o elemento B
, da seguinte maneira: li:nth-child(5){}
, como neste seletor não há nenhum cálculo a ser feito, então os estilos declarados são aplicados ao item de número que você declarou, neste caso, somente o item 5
será estilizado.