Arquivo

Posts Tagged ‘Tableless’

Boas práticas de Desenvolvimento com Padrões Web [ nth-child, com CSS3 ]

Você já precisou de criar uma tabela zebrada? Eu já, muitas vezes. Provavelmente se você não sabe programar, você precisa chamar um programador para escrever duas ou três linhas de código Javascript ou até mesmo usando JQuery, para fazer a mágica para você. A idéia do CSS, é que nós, designers, possamos controlar a aparência dos elementos HTML. Isso inclui conseguirmos fazer uma maldita tabela zebrada também. Para isso e para outros problemas parecidos, podemos utilizar a pseudo-classe nth-child. Com esta pseudo-classe é possível selecionar um determinado elemento dentro de uma árvore de elementos. Por exemplo, podemos selecionar todas as linhas ímpares das tabela. Legal, hein?

Cálculo básico

O cálculo utilizado pelo nth-child é bastante simples. Você vai usar na maioria das vezes soma. Lembra? A fómula será a seguinte: an+b.

1
2
3
table tbody tr:nth-child(2n+1) {
  background:lightgray;
}

O funcionamento é o seguinte: o browser aplica o estilo a cada 2 tr.
O código abaixo, aplica o estilo a cada 3 tr. E assim por diante.

1
2
3
table tbody tr:nth-child(3n+1) {
  background:lightgray;
}

Você pode facilitar, utilizando as palavras odd ou even, para selecionar os elementos ímpares ou pares da árvore.

1
2
3
table tbody tr:nth-child(odd) {
  background:lightgray;
}

Caso você queira pegar 9º, 19º, 29º e assim por diante:

1
2
3
table tbody tr:nth-child(10n-1) {
  background:lightgray;
}

Se o valor de a (an+b) é igual 0, você não precisa colocar a fórmula, apenas o número referente a ordem do elemento. Exemplo:

1
2
3
table tbody tr:nth-child(1) {
  background:lightgray;
}

Neste código, o browser irá colorir o background apenas do primeiro tr.

Veja o exemplo.

A propriedade nth-child faz parte dos seletores do CSS 3 e já pode ser utilizado em browsers atuais.

Fonte:  tableless.com.br
Por:  Diego Eis

[ MINHA OPINIÃO ]
Fantástico o que a CSS 3 traz para nós desenvolvedores. Más uma coisa que nos deixa triste é o fato de que ainda existe muitos usuários utilizando IE 6 para navegar. vejo constatemente desenvolvedores reclamarem desse mal que nos cerca e que na maioria das vezes fica inviável “chavecar” o cliente a trocar de navegador, ou pelo menos adquirir uma versão mais atualizada. Gente, vamos atualizar os navegadores e experimentar a Web 2.0!