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

3D CSS3 transform con bordes dentados en Firefox

3D CSS3 transform con bordes dentados en Firefox

Sucede que creamos lindos estilos para elemento con CSS3 y queremos aplicar la propiedad transform para darle profundidad 3D. Observamos que ocurre lo siguiente en Firefox: Solución: Agregar la propiedad outline con valor transparente ó con el mismo color del fondo. outline: 1px solid transparent;

Ordenando la cabeza

Ordenando la cabeza

Muchas veces nos esforzamos en tener el código más limpio y pulcro posible, pero no nos fijamos en lo que sucede dentro del <head></head>. Es una parte vital, donde se define el comportamiento de toda la página web. Pero primero, debemos entender cómo el browser lee una página web. Cuando un navegador comienza a parsear [...]

clearfix ultimate

Muchas han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class="clearfix" y nuestra caja vuelve a [...]

  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