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 Homes for Sale in Pasco County

(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