Este será un artículo corto y preciso: cómo alternar estilos dentro de un mismo elemento utilizando 3 técnicas diferentes.

Con el siguiente HTML de ejemplo:

<ul>
   <li>Elemento Uno</li>
   <li>Elemento Dos</li>
   <li>Elemento Tres</li>
   <li>Elemento Cuatro</li>
   <li>Elemento Cinco</li>
</ul>

CSS3⌗

Comencemos con la más vanguardista: con CSS3, a cada elemento impar (odd) agrégale el estilo definido:

ul li:nth-child(odd) {
   background-color: #999;
}

[Ver ejemplo][1]{.verejemplo}

Si quieres los elementos pares, basta cambiar odd por even.

jQuery⌗

Sigamos con el popular jQuery: cómo lograr estilos intercalados para elementos dependientes de uno padre:

$("ul li:odd").addClass("impar");

Teniendo en el CSS:

.impar {
   background-color: #999;
}

[Ver ejemplo][2]{.verejemplo}

Mootools⌗

Terminemos con el poderoso Mootools, mismo CSS anterior:

$$("ul li").each(function(el, count) {
   el.addClass(count % 2 == 0 ? '' : 'impar');
});

[Ver ejemplo][3]{.verejemplo}

* Si te fijaste, tanto jQuery como Mootools no coinciden en el zebra con el método con CSS3 porque manipula los elementos con Javascript y los interpreta como un array, el que tiene un índice de 0 y a partir de ahí comienza a contar hacia adelante. En el fondo no es realmente ‘impar’ o ‘par’, ten en cuenta que lo importante es la alternancia en los elementos.

[1]: http://www.csslab.cl/ejemplos/zebra/ejemplo_css3.html “Enlace en CSSLab.cl a “Ejemplo CSS3 estilos alternados”” [2]: http://www.csslab.cl/ejemplos/zebra/ejemplo_jquery.html “Enlace en CSSLab.cl a “Ejemplo jQuery estilos alternados”” [3]: http://www.csslab.cl/ejemplos/zebra/ejemplo_mootools.html “Enlace en CSSLab.cl a “Ejemplo Mootools estilos alternados””