Compreendendo o seletor CSS :nth-child()

Como todos os seletores CSS, você pode usar :nth-child() para identificar elementos em uma página web e aplicar estilos a eles. Mas este seletor permite restringir um conjunto de irmãos com base em sua posição relativa.

O seletor oferece suporte a algumas palavras-chave básicas para casos comuns, mas também fornece uma poderosa sintaxe de correspondência de padrões. Usando-o, você pode selecionar elementos com base em padrões regulares e repetidos ou definições mais complexas, com base em suas necessidades.

A sintaxe do seletor :nth-child()

Como um Seletor de pseudoclasse CSS, a sintaxe :nth-child() difere de outros seletores. É necessário um argumento como padrão para combinar elementos em um conjunto de irmãos:

:nth-child(args) {
/*...*/
}

O foco principal está nos argumentos entre parênteses. Esses argumentos definem o subconjunto de elementos a serem selecionados.

Usando valores de palavras-chave para casos comuns

Este seletor pode acomodar dois valores de palavras-chave: chance e até. Eles são particularmente úteis para estilizando linhas alternativas em uma tabela.

Uma lista ordenada simples é outro bom exemplo de quando você pode usar estes valores de palavras-chave:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Usando o :n-ésimo filho (ímpar) seletor, você pode alterar a cor de cada item alternativo:

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

Os itens começam no índice 1, então o primeiro item aparecerá em vermelho, depois o terceiro e assim por diante:

Notação funcional para mais flexibilidade

Você pode usar um único número inteiro para selecionar um elemento individual, assim:

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

Neste caso, o seletor corresponde apenas ao quarto item da lista:

Esta sintaxe é um caso especial da sintaxe funcional mais geral que seleciona itens que correspondem a um determinado padrão. Esta sintaxe é:

:nth-child(An+B) {
/*...*/
}

Nesta notação, A é o tamanho do passo. Isso significa o número de vezes que o seletor se move para selecionar o próximo item. Ele permite que você selecione todos os outros itens, cada terceiro item, etc. B é o ponto de partida onde a seleção começa.

Por exemplo, pegue o argumento 3n+1:

li:nth-child(3n+1) {
color: red;
}

Isso iniciará a seleção no primeiro item e continuará com cada terceiro item depois disso:

Compare isso com a expressão 3n+2:

li:nth-child(3n+2) {
color:red;
}

Isso ainda seleciona cada terceiro item, mas agora começa no segundo item da lista:

Outro exemplo interessante é :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Este selecionará todos os itens (n), começando pelo terceiro (+3). Isso parecerá assim:

Você também pode usar a subtração para obter determinados resultados:

li:nth-child(3n-1) {
color: red;
}

Este exemplo ainda seleciona cada terceiro item, mas começa com “menos primeiro”. Na verdade, isso significa que ele selecionará o segundo item da lista, depois o quinto e assim por diante:

O de Sintaxe

Você também pode usar a palavra-chave de seguido por um seletor como um argumento no seletor :nth-child(). Essa sintaxe permite restringir os itens possíveis que o padrão regular seleciona.

Por exemplo, imagine que sua marcação seja mais complicada que a original:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Agora, use :nth-child para selecionar os itens pares do conjunto daqueles com uma classe específica:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Observe como apenas os itens pares em negrito são vermelhos:

Considere também como isso difere de li.new: enésimo filho (par) que tem como alvo novos elementos, mas apenas se eles forem pares. Estes seriam os itens 2 e 6 no exemplo acima.

Trabalhando com o seletor :nth-child()

Você pode obter designs exclusivos usando o seletor :nth-child(). Você pode criar sites coloridos e destacar linhas e colunas em tabelas de dados. Combiná-lo com outros seletores CSS ajudará você a criar layouts e designs complexos.