Pseudoclasse nth-child
A pseudoclasse nth-child seleciona um elemento
que é o enésimo filho do seu pai.
Sintaxe
seletor:nth-child(número | odd | even | expressão) {
}
Valores
| Valor | Descrição |
|---|---|
| número |
Um número positivo começando em 1.
Especifica o número do elemento ao qual queremos
nos referir. A numeração dos elementos começa em 1.
|
odd |
Elementos ímpares. |
even |
Elementos pares. |
| expressão |
Podemos criar expressões especiais com a letra n,
que representa todos os números inteiros de zero (não de um)
até o infinito. Assim, 2n significa todos os números pares
(a partir do segundo).
Como entender isso? Substituímos n sequencialmente
por números a partir de 0 em diante: se n = 0, então 2n resulta em 0 -
esse elemento não existe (numeração dos elementos começa em 1),
se n = 1, então 2n resulta em 2 - o segundo elemento, se n = 2,
2n resulta em 4 - o quarto elemento. Se escrevermos 3n - isso
será cada terceiro elemento (a partir do terceiro), e assim por diante.
|
Exemplo
Neste exemplo, vamos deixar vermelho
o li que é o 4º filho
do seu pai:
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Exemplo
Agora vamos deixar vermelhos todos os li pares:
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Exemplo
Agora vamos deixar vermelhos todos os li ímpares:
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Exemplo
Agora vamos deixar vermelha cada terceira
li (a partir da terceira):
<ul>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Exemplo
No seletor, você pode especificar um intervalo de elementos.
Suponha que você tenha uma lista de 20
elementos e precise selecionar os elementos do 7
ao 14 inclusive. Isso pode ser feito
assim:
<ol>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
<li>item da lista</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
