0

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 2

2

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.

2

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .