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;
}
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;
}
Mootools
Terminemos con el poderoso Mootools, mismo CSS anterior:
$$("ul li").each(function(el, count) {
el.addClass(count % 2 == 0 ? '' : 'impar');
});
* 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.
Comentarios
En el ejemplo de jquery, le estas asignando la clase «impar», pero en css declaras .odd
Y en MooTools, tambien funcionan los selectores, por lo que no hace falta el if, http://mootools.net/docs/core125/core/Utilities/Selectors#Selector:nth-child
Gracias javier, corregido.
¡Excelente! me gusto mucho (-.-)
Mil gracias Jorge…!
Un saludo desde Colombia!
Me gusta mucho tu sitio.
Tienes muchas cosas novedosas, gracias y muy buenas.
Gracias