CSS

CSS: Efecto cebrado en tablas y listas

20 febrero, 2011

Vamos ver como colorear de forma de alterna los colores de filas de una tabla, listas, etc… pero utilizando solo CSS. Esto mismo se puede hacer tanto con javascript o con php de una manera un poco mas detallada. En css tenemos el selector nth-child que con los atributos even y odd podemos crear un efecto cebreado en una tabla muy facilmente. Un ejemplo a todos los tr de una tabla:


tr:nth-child(even) { background: #ddd }
tr:nth-child(odd) { background: #fff}

Aquí puedes ver un ejemplo

Visto lo anterior podemos preguntar si es posible otra forma de dar color. De hecho, CSS no sólo permite alternar entre pares e impares, sino también según intervalos arbitrarios. Las palabras claves “even” y “odd” no son más que abreviaturas de conveniencia. Por ejemplo, con una lista larga podríamos hacer esto:

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.

Veamos el ejemplo

También podría gustarte

Sin Comentarios

Dejar un Comentario