Estilos alternados con CSS3, jQuery y Mootools

13/Feb/2012 269

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.

Comentarios

  1. ivermectin till salu [#]

    stromectol 3 mg dosage https://stromectolforte.com/# cena stromektolu ivermectin

  2. zyrtec for colds [#]

    what is cetirizine – https://allergyd.com

  3. side effects of cetirizine hcl [#]

    fexofenadine hydrochloride – http://allergyd.com

  4. pharmacepticacom [#]

    erectile curvature https://pharmaceptica.com/

  5. buy generic stromectol [#]

    stromectol pill

    portrait epicondylitis garage

  6. roaccutane side effects [#]

    isotretinoin side effects how does accutane work

  7. buyprovigilonline [#]

    modafinil vs adderall modafinil side effects

  8. stromectolforte.com [#]

    ivermectin tablets dosage http://stromectolforte.com/# ivermectin ivermectin for humans over the counter skin

  9. how much ivermectin for 200 pound person [#]

    ivermectin human dose

    overall dithiolethione landscape

  10. bactrim side effects [#]

    trimoxazole tablet uses sulfameth trimethoprim 800 160mg tb

  11. is ivermectin for horses safe for humans [#]

    I am sure this article has touched all the internet users, its really
    really pleasant paragraph on building up new blog. http://harmonyhomesltd.com/Ivermectinum-precautions.html

  12. modafinilsmartdrug [#]

    how to get modafinil prescription adrafinil vs modafinil

  13. prednisonetaper [#]

    what is prednisone prescribed for side effects of prednisone

  14. ivermectin tablets for humans [#]

    stromectol https://stromectolforte.com/# stromectol pills stromectol

  15. provigilgeneric [#]

    buy provigil buy modafinil online

  16. bactrim cream [#]

    bactrim dosage trimethoprim sulfamethoxazole

  17. stromectolforte.com [#]

    buy ivermectin 6mg http://stromectolforte.com/ ivermectin for humans amazon ivermectin for sale

  18. GustavoVet [#]

    online essay editing
    paper writing service reviews

  19. GustavoVet [#]

    resume services
    writing essay service

CSSLab