Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Este documento é uma tradução de português (Europeu) do documento Inglês oficial.:
https://www.w3.org/Style/Examples/007/evenodd.html. Esta tradução foi proporcionada por Elisa Maria e pode conter alguns erros. Para eliminar dúvidas por favor consulte a versão oficial deste documento em Inglês. Versão de Português (Europeu)
Pigeon Forge Cabin For Sale Cabins For Sale in Gatlinburg TN www.tampahomes.us.com

(This page uses CSS style sheets)

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}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

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}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

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.

CSS Valid CSS!

Bert Bos
criado em 17 de Janeiro de 2003;
Última actualização $Data: 2009/03/03 14:39:10 $GMT