0 Compartilhamentos 306 Views

Como fazer uma “zebra”

28 de janeiro de 2014

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:

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:

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…

Carregando...

Você pode se interessar

Como desativar temporariamente sua conta do Facebook
Dicas
11 visualizações
Dicas
11 visualizações

Como desativar temporariamente sua conta do Facebook

Carlos L. A. da Silva - 19 de setembro de 2020

Preparado para um "detox" da rede social? O Facebook permite que você suspenda sua conta sem precisar apagá-la permanentemente.

Promoções de Jogos do Final de Semana (18/09)
Notícias
11 visualizações
Notícias
11 visualizações

Promoções de Jogos do Final de Semana (18/09)

Carlos L. A. da Silva - 18 de setembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

O que você precisa saber sobre o Pix
Artigos
19 visualizações
Artigos
19 visualizações

O que você precisa saber sobre o Pix

Carlos L. A. da Silva - 16 de setembro de 2020

Será o fim de DOCs, TEDs e transferências? Novo modelo de pagamento eletrônico proposto pelo Banco Central está prestes a entrar em funcionamento.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como centralizar no CSS de forma definitiva
Dicas
21 visualizações
21 visualizações

Como centralizar no CSS de forma definitiva

Carlos L. A. da Silva - 12 de setembro de 2020
Promoções de Jogos do Final de Semana (11/09)
Notícias
24 visualizações
24 visualizações

Promoções de Jogos do Final de Semana (11/09)

Carlos L. A. da Silva - 11 de setembro de 2020
Esse artigo foi escrito por um robô
Artigos
22 visualizações
22 visualizações

Esse artigo foi escrito por um robô

Carlos L. A. da Silva - 9 de setembro de 2020
Home Booth? Você quase trabalhou em um desses…
Artigos
33 visualizações
33 visualizações

Home Booth? Você quase trabalhou em um desses…

Carlos L. A. da Silva - 5 de setembro de 2020