O nth-child é um poderoso seletor do CSS 3. Com a sua utilização é possível selecionar o 5 elemento “li” de uma lista sem precisar definir uma classe ou id especifico para ele.
Veja o exemplo, no qual estou selecionando o quinto elemento com li:nth child(5)
- LI 1
- LI 2
- LI 3
- LI 4
- LI 5
CSS 3
.test li:nth-child(5){font-weight:bold}
<ul class="test"> <li>LI 1</li> <li>LI 2</li> <li>LI 3</li> <li>LI 4</li> <li>LI 5</li> </ul>
Agora para selecionar apenas os 5 primeiros elementos, utilizamos:
li:nth-child(-n+5) { font-weight:700;color:red; }
Pular os 5 primeiros items e selecionar todos acima:
li:nth-child(n+6) { font-weight:700;color:red; }
Selecionando os Pares ou Impares (odd ou even):
li:nth-child(odd) { font-weight:bold }
Exemplo do odd e even
- LI 1
- LI 2
- LI 3
- LI 4
- LI 5
- LI 5
Selecionando apenas o ultimo elemento:
li:last-child { color: orange; }
Selecionando o segundo elementos depois do último:
li:nth-last-child(2) { color: gray; font-weight:700 }
Definição nth-child
O :nth child(n) irá selecionar todos os elementos filhos conforme a sua ordem númerica, independente do tipo.
n pode ser um número, palavra chave ou até uma formula.
sintaxe
:nth-child(number) { declarações de css }
+ Seletores
:nth-last-child(n): último elemento
:nth-last-of-type(n): último elemento, com o filtro por tipo
:nth-of-type(n):
Restringe a regra de seleção a apenas um tipo de elemento.
Para selecionar apenas os elementos “p”: p:nth-of-type(2) ou apenas os “li”: li:nth-of-type(2)
Compatibilidade
+ Conteúdo
Gerador de bordas arredondadas no CSS – Border-Radius Online
Tutorial de como fazer o efeito parallax com CSS