Pseudoclasse nth-child

A pseudoclasse nth-child seleciona um elemento que é o enésimo filho do seu pai.

Sintaxe

cssseletor: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:

html<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>

cssli:nth-child(4) {
  color: red;
}

Результат:

Exemplo

Agora vamos deixar vermelhos todos os li pares:

html<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>

cssli:nth-child(even) {
  color: red;
}

Результат:

Exemplo

Agora vamos deixar vermelhos todos os li ímpares:

html<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>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Exemplo

Agora vamos deixar vermelha cada terceira li (a partir da terceira):

html<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>

cssli: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:

html<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>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: