Se você é um cara muito técnico, que adora matemática e números, prefiro que você leia a documentação do W3C sobre nth-child. Ela é mais rica em detalhes sobre o cálculo que essa pseudo-classe faz. Este artigo é para os pobres mortais.
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.
[cc lang=”css”]
table tbody tr:nth-child(2n+1) {
background:lightgray;
}
[/cc]
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.
[cc lang=”css”]
table tbody tr:nth-child(3n+1) {
background:lightgray;
}
[/cc]
Você pode facilitar, utilizando as palavras odd ou even, para selecionar os elementos ímpares ou pares da árvore.
[cc lang=”css”]
table tbody tr:nth-child(odd) {
background:lightgray;
}
[/cc]
Caso você queira pegar 9º, 19º, 29º e assim por diante:
[cc lang=”css”]
table tbody tr:nth-child(10n-1) {
background:lightgray;
}
[/cc]
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:
[cc lang=”css”]
table tbody tr:nth-child(1) {
background:lightgray;
}
[/cc]
Neste código, o browser iá colorir o background apenas do primeiro tr.
A propriedade nth-child faz parte dos seletores do CSS 3 e já pode ser utilizado em browsers atuais.
Se você ainda não leu sobre seletores do CSS, leia estes artigos abaixo: