Publicado por: 0

Muchos de vosotros conoceréis el selector css “nth-child”, y los que no lo conozcáis, pues deberías! xD.

Nos permite decir adiós a tener que ir marcando en el html los típicos ‘odd’ y ‘even’ como class en nuestras tablas y listados. Un simple “nth-child(2n+1)” y fuera! Nos ahorramos un montón de trabajo.

Podéis ver mejor como funciona en este artículo: http://css-tricks.com/5452-how-nth-child-works/
El problema de esto, como siempre, es que no es cross browser, y es nuestro amigo IE quien no se entera de esta propiedad… 🙁 Incluso en IE8!!

Como dice al final del artículo, para solucionar este tema, es posible usar jQuery, y así es!
Con una línea de jQuery, podemos obtener los mismos resultados que con la css, pero para todos los navegadores!!

Y aquí viene el valor añadido sobre el artículo anterior… El ejemplo que nos aclarará como es la cosa:

Css:
<<table.myclass tr:nth-child(2n+1) { background-color: #F6F6F6; }>>

jQuery:
<<$(“table.myclass tr:nth-child(2n+1)”).css(“background-color”, “#F6F6F6”);>>

Espero que os sirva!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.