English to Spanish Translation by Trusted Translations, Inc.

Otras Traducciones de W3 en Spanish Translator Services

Este documento es una traducción del tutorial "Even and odd rules" propiedad de Bert Bos publicado en el sitio de W3C.

La versión en inglés de esta especificación es la única con valor normativo y puede encontrarse en: http://www.w3.org/Style/Examples/007/evenodd.html

Hojas de estilo para la Web
Trucos y sugerencias para CSS

(Esta página usa hojas de estilo CSS)

Estado

Advertencia: al momento de escribir esto (febrero de 2003), los principales navegadores todavía no admiten el selector 'nth-child' (introducido en noviembre de 2001) y muy pocos admiten el elemento COL.

Reglas pares e impares

Una forma de mejorar la legibilidad de tablas de gran tamaño es pintar las filas de colores alternados. Por ejemplo, en la tabla que aparece a continuación, las filas pares tienen fondo gris claro y las filas impares, fondo blanco. Las reglas para hacerlo son extremadamente sencillas:

tr:nth-child(even) {background: #CCC }
tr:nth-child(odd) {background: #FFF}
Mes199419951996199719981999200020012002
ene141314131411111111
feb131512151512141313
mar161514171615141515
abr171617171715151616
may212020212220212019
jun242325242523252324
jul292826262726252625
ago292827282827262826
sep242323262424242221
oct2022202220192022
nov1817161716151415
dic1513131413101311

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.

Columnas pares e impares

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}
Mes199419951996199719981999200020012002
ene141314131411111111
feb131512151512141313
mar161514171615141515
abr171617171715151616
may212020212220212019
jun242325242523252324
jul292826262726252625
ago292827282827262826
sep242323262424242221
oct2022202220192022
nov1817161716151415
dic1513131413101311

El fondo de las filas (TR) se dibuja enfrente del fondo de las columnas (COL), de modo que no hay que ponerle fondo a las filas, o el fondo de las columnas no será visible.

CSS ¡CSS válido!¡HTML 4.0 válido!

Bert Bos
creado el 6 de febrero de 2003;
última actualización $Date: 2007/01/15 13:04:18 $ GMT