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

Tip Precoz 3: RGBa

Tip Precoz 3: RGBa

Como debes saber, existe más de una manera de declarar colores en CSS: Nombres (websafe): por 17 colores en inglés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white y yellow (actualmente los browsers modernos soportan muchos más). Sistema (no lo recomiendo): por colores del sistema operativo que esté utilizando el usuario del sitio: ActiveBorder, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, HighlightText, InactiveBorder, [...]

Tip precoz 8: Deshabilitar click derecho con jQuery

Puede que sea necesario, puede que algún cliente te lo pida y aunque argumentes de diferentes maneras no entienda que no es recomendable deshabilitarle opciones innatas al usuario limitándole la accesibilidad. Pero al final de cuentas, tenemos que vivir y accedemos a realizarle lo que necesita, con tal de terminar luego y entregar el proyecto [...]

¿Con o sin comillas?

Al declarar algunos valores en propiedades CSS como background-image, usualmente se permite poner o no el valor entre comillas dobles "" ó simples ”. Si escribes el código a mano, no las utilizas. Si usas algún editor, quizas las agrega. Pero ¿se debe o no poner comillas? Esta pregunta que ha intrigado al hombre por [...]

  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
Cargando