Estilos alternados con CSS3, jQuery y Mootools

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

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

Mootools

Terminemos con el poderoso Mootools, mismo CSS anterior:

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

Ver ejemplo

* 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.

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Ventana modal sólo con CSS

A raíz de mi proyecto musical más reciente lanzado, incluyendo el sitio web donde me divertí mucho utilizando Mootools para sus diferentes funcionalidades, iré ampliando los artículos relacionados con este framework de JS explicando los puntos más importantes de su desarrollo. Pero para comenzar, mostraré un modo de crear ventanas modales (lightbox, thickbox, greybox, modalbox… [...]

Aceleración por hardware con CSS3

La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores capaces). Si estás haciendo animaciones y transformaciones varias utilizando CSS3, existe un truco para engañar [...]

Videocast 3: creando un plugin para jQuery

Ayer se me acerca un colega de trabajo con algunas preguntas relativas a un proyecto de cómo encontrar una solución a una funcionalidad utilizando jQuery. Papel y lápiz en mano, me puse a explicarle cómo imaginaba que sería, pero después pensé en cómo hacerlo mejor aún, con menos líneas de código y en los posible [...]

  1. 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

    javier
    14 / Febrero / 2012

  2. ¡Excelente! me gusto mucho (-.-)
    Mil gracias Jorge…!
    Un saludo desde Colombia!

    William Üreña
    14 / Abril / 2012

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 16 veces