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.



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.