Listras com Pseudo-class nth-child

Ainda falando sobre CSS 3 e pseudo-class, vou falar do “:nth-child” pois fiz um CMS e passei exatamente por essa situação, então imagine uma TABLE HTML, onde vamos utilizar CSS para alterar o background-color do TR para deixar a TABLE listrada.

Listras

Hoje precisamos adicionar nos TR uma classe que vai configurar uma cor de fundo diferente, utilizamos alguma espécie de programação para fazer isto (php, js) ou editamos a lista de TR no braço, isto já é um trabalho a mais, e percebe-se que ainda não possuimos controle total atráves da camada visual(css)… AH, e esqueça este efeito se possuir apenas permissão para editar o CSS.

Mas através da pseudo-class “:nth-child”

tr:nth-child(even) td { background: white }
tr:nth-child(odd)  td { background: blue }

Este código diz que toda linha deve ser branca , mas que a cada duas linhas uma seja ser azul,

:nth-child(even) = selecione todas as linhas

:nth-child(odd)= a cada duas linhas selecione uma

A solução fica simples !!… e isto não aplica-se apenas em tabelas, pode ser utilizado em qualquer elemento, textos, menus … e onde nossa imaginação ousar e/ou o browser permitir..

É outra proposta dos criadores do CSS para facilitar mais um pouco o desenvolvimento web, tomara que a história da implementação dos browser não estrage tudo.

Anúncios

3 Respostas para “Listras com Pseudo-class nth-child

  1. Olá, gostei da explicacao, eu tive que fazer o zebrado na mao tbem.rss, aqui nao funcionou o exemplo acima. como aplicar ele ?

    Obrigado.

  2. Pra mim tb não funcionou!

  3. Tem que testar em um browser que dê o suporte à declaração.
    Se não me engano… o Opera

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s