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

bottom que no se va al bottom

Este es un fix corto y preciso. En browsers modernos (¡sí, tal como leíste esto no afecta IE6 ni IE7!) la propiedad background-position no funciona como uno espera. La condición dice: Si quieres poner una imagen como fondo del <body> y posicionarla abajo de la ventana del browser (background-position: bottom) y el contenido de tu [...]

Pointer-Events en CSS3

Pointer-Events en CSS3

Tonteando con una idea que tuve de un bookmarklet (una analogía gráfica que contamina visualmente un sitio web de la misma manera en que estamos contaminados quienes vivimos en grandes ciudades), tuve una epifanía y pude resolverla. La idea es crear una capa sobre todo el contenido del sitio: un <div> posicionado fijo, ancho y [...]

jQuery Timelinr

jQuery Timelinr

This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.

  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