Seletor de elementos nth-child – CSS3

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}

HTML

<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

Como sempre quando o assunto é CSS 3, você apenas terá grandes problemas de compatibilidade com as versões mais antigas do Internet Explorer, (< 7).

+ Conteúdo

Gerador de bordas arredondadas no CSS – Border-Radius Online

Tutorial de como fazer o efeito parallax com CSS