Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Estatuto

Atenção: Atenção: no momento desta escrita (Fevereiro 2003), a maioria dos navegadores ainda não suporta o selecionador 'nth – child' (criado em Novembro de 2001) e muito poucos suportam elemento COL.

Regras Pares e Ímpares

Uma forma de melhorar a legibilidade de grandes tabelas é colorir alternadamente linhas. Por exemplo, a tabela em baixo tem um simples fundo cinza para as linhas pares e branco para as linhas ímpares. As regras para isso são extremamente simples:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

De facto, o CSS permite não só alternancias Pares/Ímpares, mas intervalos arbitrários. As palavras-chave 'Pares' e 'ímpares' são apenas atalhos convenientes. Por exemplo, para uma lista longa pode fazer isso:

li:nth-child(5n+3) {font-weight: bold}

Isto diz que cada quinto item da lista está a negrito, a começar na terceira. Noutras palavras, os itens 3,8,13,18,23, etc estão a negrito.

Colunas Pares e Ímpares

O mesmo funciona paras as colunas nas tabelas mas têm que ter um elemento no documento que corresponda à coluna. HTML disponibiliza COL para isso. A tabela têm que começar com COL em todas as coluna:

<table>
<col><col><col><col><col><col><col><col><col><col>

<tr><th>Month<th>1994<th>1995<th>1996...

(COL pode ser usado para outras coisas sem ser o estilo, mas neste caso tudos o que precisamos é que os elementos COL estejam presentes.) As regras seguintes dão à primeira coluna fundo amarelo e depois um fundo cinza a todas as colunas a partir da terceira coluna.

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

O fundo da linha (TR) é desenhado em frente ao fundo da coluna (COL), então se quer ter a certeza que o fundo da coluna é visível, não defina um fundo nas linhas.