Los que trabajamos programando o diseñando front-end i/o back-end nos hemos dado muchas veces con la necesidad de, a la hora de generar una tabla, que esta intercale los colores de sus filas de forma automática. Y cuando digo automática, me refiero a que no lo tengamos que hacer mediante programación en la creación de la tabla.
Si alguna vez habéis participado en la mejora de un site, o habéis visto el código de webs que no son vuestras, quizá hayáis dado con alguna que solucione esto de la siguiente forma:
<tbody>
<tr class="odd">
<td>Contenido</td>
</tr>
<tr class="even">
<td>Contenido</td>
</tr>
<tr class="odd">
<td>Contenido</td>
</tr>
<tr class="even">
<td>Contenido</td>
</tr>
</tbody>
Muchas veces se crean dos clases “odd” (impar) y “even” (par), para dar un color distinto a cada fila, y así al generar la tabla se intercala la clase a medida que se genera. Es una solución, pero no la mejor de ellas. Sin contar en que tenemos que crear una condición en el bucle de la programación para que itere entre las dos opciones si es par o impar.
La mejor solución, y que para eso existe, es usando selectores de tercer nivel que nos ofrece CSS3.
Si ahora mismo no sabéis de que estoy hablando, seguro que este trocito de código os suena:
a:hover{}
:hover es un selector de tercer nivel, clasificado como una pseudo-clase de acción, ya que se encarga de cambiar el formato de un elemento según pase el ratón por encima.
Y ahora que sabemos bien que son los selectores de tercer nivel, os enseñamos como hacer el cambio de color de las filas, usando :nth-child, que es una pseudo-clase estructural.
:nth-child(n): Este selector selecciona el elemento indicado con la condición de que sea el hijo enésimo de su padre. Es útil para seleccionar el segundo elemento de una lista, el quinto párrafo de un texto, etc.
La explicación matemática es la siguiente:
Representamos el elemento que queremos seleccionar con la expresión (an+b) e identificaremos una lista con “a” elementos en la que queremos destacar el elemento “b“.
EJEMPLO:
tr:nth-child(2n+1) /* representa cada fila impar de una tabla HTML */
tr:nth-child(odd) /* igual al anterior */
tr:nth-child(2n+0) /* representa cada fila par de una tabla HTML */
tr:nth-child(even) /* igual al anterior */</pre>
Podemos jugar tanto como queramos con esto, por ejemplo, si queremos seleccionar un elemento de cada nueve de una lista infinita. Sería algo como (10n-1) o (10n+9):
:nth-child(10n-1) /* representa el 9, 19, 29, etc, elementos */
:nth-child(10n+9) /* igual al anterior */</pre>
Si lo queréis ver ejemplificado, aquí podéis ver una demo en acción:
DEMO
Más info:
Selectors Level 3 [W3C]
Al ver el nombre me ha recordado a esos dibujos que seguramente todos hemos visto en nuestra infancia, “Chip y Chop” esas pequeñas ardillas con voz de pito… Pero no, no se trata de dibujos animados.
