Estilo de elementos de lista pares e impares: pseudoclases frente a enésimo hijo

Al intentar lograr colores alternos para elementos de lista utilizando pseudoclases CSS, es posible encontrar problemas. Si bien puede parecer lógico usar li:odd y li:even para este propósito, el comportamiento puede ser impredecible.

Para diseñar eficazmente instancias pares e impares de elementos de la lista, considere usar el siguiente enfoque:

En lugar de:

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

Uso:

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

Al reemplazar :impar y :par con :nth-child(impar) y :nth-child(par), se logra el efecto de coloración alterna deseado. Esto se debe a que :nth-child le permite seleccionar elementos según su posición dentro de la lista, lo que garantiza que se aplique el estilo correcto a cada elemento.