Zebra tables con CSS3

CSS3 está a la vuelta de la esquina, gracias a la complementación por parte de los navegadores, este estándar poco a poco va haciéndose más real y van apareciendo perlas como estas del equipo devOpera.

En el artículo, nos muestran como usar el pseudo-selector nth-child , un selector que nos permitirá crear tablas estilo zebra con una sola línea.

tr:nthchild(2n+1) {
  background-color: #99ff99;
}

Al selector le debemos indicar el número de líneas a los que ha de aplicar el estilo, en este caso, cada 2 líneas empezando en la posición 1 (comienzan en el 0).

Más información

• W3C Selectors
• QuirksMode