Este es un post bien sencillo pues es una utilidad que no sabía hacerla con selectores CSS, anteriormente lo creaba con JQuery, agregando clases y quitando por lo que decidí leer un poco y resolver mi inquietud con CSS . Este estilo ayuda mucho en la legibilidad de las tablas cuando se hacen extensas en datos.
Este sería el estilo para las filas pares e impares
tr:nth-child(even) {background: #CCC }
tr:nth-child(odd) {background: #FFF}
Exactamente el selector permite no solo alternar entre pares e impares sino que nth-child admite intervalos arbitrarios para su aplicación. Este es un ejemplo
para los li con seleccion diferente a la anterior.
li:nth-child(5n+3) {font-weight: bold}
Lo que quiere decir que cada quinto elemento contando a partir del tercero aparecerá en negrita. Dicho de otro modo, estarán en negrita los elementos con la numeración 3, 8, 13, 18, 23, etc.
De igual forma para las columnas
Lo mismo vale para columnas de tablas, pero entonces debe haber un elemento del documento que se corresponda con la columna. A tal fin existe en HTML el elemento COL. La tabla debe tener un COL al principio de cada columna:
<table> <col><col><col><col><col><col><col><col><col><col> <tr><th>Mes<th>1994<th>1995<th>1996...
(El elemento COL sirve para otros usos además de la aplicación de estilos, pero en este caso lo único que necesitamos es que haya elementos COL). Las siguientes reglas ponen fondo amarillo a la primera columna y luego fondo gris a las columnas impares a partir de la número 3:
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Espero les ayude.





Muchas gracias por el tutorial.
thanks
Interesante!!!!