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.
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…
