Estilizando elementos de lista pares e ímpares: pseudoclasses vs. n-ésimo filho

Ao tentar obter cores alternadas para itens de lista usando pseudoclasses CSS, você pode encontrar problemas. Embora possa parecer lógico usar li:odd e li:even para essa finalidade, o comportamento pode ser imprevisível.

Para estilizar efetivamente instâncias pares e ímpares de itens de lista, considere usar a seguinte abordagem:

Em vez de:

li { color: blue }
li:odd { color:green }
li:even { color:red }

Use:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

Ao substituir :odd e :even por :nth-child(odd) e :nth-child(even), o efeito de coloração alternada desejado é alcançado. Isso ocorre porque :nth-child permite selecionar elementos com base em sua posição na lista, garantindo que o estilo correto seja aplicado a cada item.