Seletor :nth-child

Acho justo que você saiba que esse seletor não funciona no IE – quer dizer, até funciona, mas só na versão 9. Já nos demais navegadores populares (FF 3.5+, Chrome 4, Safari 4) tá tudo bem, menos no Opera, que tem alguns problemas.

Como você já deve saber, o seletor first-child funciona para o primeiro item (filho) e o last-child para o último item (também filho), o nth-child seleciona esses itens de um jeito mais específico, deixando você livre da necessidade de aplicar alguma classe ou fazer alguma “gambiarra” do tipo.

Vamos para alguns exemplos:

Selecionando o primeiro item de uma lista, teremos o seguinte CSS e o respectivo código HTML:

ul li:first-child {
	color:#f00;
	}
  • Primeiro Item
  • Segundo Item
  • Terceiro Item
  • Quarto Item
  • Quinto (e último) Item

Caso você faça um teste, o código acima vai aplicar a cor vermelha (#f00 ou #ff000) no primeiro item da lista.

O nth-child é mais flexível. Você deve inserir as regras do seletor dentro de parênteses após no final do mesmo, veja alguns exemplos:

Selecionando o terceiro item da lista

ul li:nth-child(3) {
	color:#f00;
	}

Selecionando do segundo até o último item da lista

ul li:nth-child(n+2) {
	color:#f00;
	}

Selecionando somente os três primeiros itens

ul li:nth-child(-n+3) {
	color:#f00;
	}

Bem simples, não? Pois é, e tem mais coisa…

Selecionando os items pares e os ímpares, respectivamente.

ul li:nth-child(odd) {
	color:#f00;
	}

Obs.: Use “odd” para ímpar e “even” para par.

E também podemos usar os últimos items como referência, combinando o nth-child com o seletor last-child.

Selecionando o penúltimo e antepenúltimo item, respectivamente:

ul li:nth-last-child(2) {
	color:#f00;
	}
ul li:nth-last-child(3) {
	color:#f00;
	}

E dá pra combinar também. O código abaixo seleciona todos itens antes do antepenúltimo item:

ul li:nth-last-child(n+3) {
	color:#f00;
	}

Se você quiser, pode dominar as regras e fazer suas mágicas.

 
  • sNniffer

    Show