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!