Cebras

En ocasiones veo cebras muertas...
Anda que no lleva años dando vueltas el problema de las tablas y pintar cada fila de un color distinto según sea par o impar. Bueno, pues una solución con jQuery en 1 línea es ésta:

$("tr:odd").addClass("odd");

Si es que no se puede hacer más en menos. Solo tenemos que acordarnos de lanzarlo al principio. Por supuesto, nuestro CSS tiene que tener algo de chicha:

.odd { background: #ccc; }

Ahora bien... si manipulamos una tabla dinámicamente (p.e. la cargamos mediante AJAX) si lanzamos el código tal cual para todos los tr's podemos tener efectos indeseados. Si esto ocurre, siempre podemos resetear las clases antes de llamar al código con:

$("tr").removeClass("odd");

Minimalista a más no poder, pero creíais que lo iba a dejar así sin más?... pues no!, se puede hacer más sencillo aún solo con CSS sin javascript... es más, no hay solo una manera si no dos al menos!!!! (IEs 8 y anteriores abstenerse).

Forma 1. nth-child
Usando este pseudo selector de CSS3 se puede hacer la magia. Básicamente lo que define es que para los hijos n, usando una sencilla fórmula se pueden aplicar estilos solo a ellos. Ejemplo:

ul li:nth-child(3n+3) {
  color: #ccc;
}

En el nth-child, n vale desde 0 hasta el número de iteraciones necesarias de modo que si tenemos 3n+3, se aplicará el estilo a los hijos:

• 3 * 0 + 3 = 3
• 3 * 1 + 3 = 6
• 3 * 2 + 3 = 9
• ...

Así que si queremos aplicar estilo a las filas impares de una tabla habría que hacer:

tr:nth-child(2n+1) {
  color: #ccc;
}

Para las pares solo habría que quitar el "+1"

Forma 2. :odd y :even
Vaya tontería, pero si al final resulta que hay un pseudo selector CSS3 que directamente selecciona impar y par respectivamente!. Sí, es prácticamente lo mismo pero te ahorras la fórmula.

ul li:nth-child(odd) {  color: #ccc;}ul li:nth-child(even) {  color: #ccc;}

Nota: para los no anglófonos... odd = impar, even = par.