Categorias

Como fazer uma “zebra”

Listras de zebra ou simplesmente tornar diferentes as linhas de uma listagem é uma destas convenções gráficas que parecem não morrer. Veio do design gráfico e fincou raízes no design para web.

Antigamente, você fazia isso alterando o backgroundcolor das linhas de uma tabela. Tempos ruins…

Mais recentemente, você conseguia o efeito especificando uma classe para a linha clara e uma classe para a linha escura. Ou só para a linha escura. E alternava ao gerar o código dinamicamente no servidor ou depois usava Javascript para adicionar a classe no cliente.

Zebra
Listras de zebra na listagem de jogos do Steam

Graças ao CSS3, criar uma “zebra” ficou muito fácil:

#zebra p:nth-child(2n) {
    background-color: #CCC;
}

Mas o que significa esse seletor estranho?! Significa que a cada dois parágrafos dentro da div zebra será aplicado o estilo de um fundo cinza. A contagem irá começar a partir do primeiro elemento e irá alternando. Se você quiser que o estilo comece a partir do segundo elemento, é só usar :nth-child(2n+1).

Mas o W3C foi inteligente o bastante para perceber que existem casos bem específicos do “nth-child”, incluindo a criação de “zebras” e criou os seletores :nth-child(even) e :nth-child(odd) que fazem as mesmas coisas que os anteriores:

#zebra p:nth-child(even) {
    background-color: #CCC;
}

Infelizmente, o Internet Explorer 8 não oferece suporte ao recurso. A menos que você utilize o truque de Javascript que habilita o suporte a HTML5 no navegador antigo, apesar de estarmos falando de CSS3. Não tente entender…