Compreender o seletor CSS :nth-child()

Como todos os selectores CSS, pode utilizar :nth-child() para identificar elementos numa página Web e aplicar-lhes estilos. Mas este seletor permite-lhe restringir um conjunto de irmãos com base na sua posição relativa.

O seletor oferece opções de palavras-chave fundamentais e uma sintaxe avançada baseada em padrões para acomodar vários requisitos. Pode escolher entre selecções simples que aderem a padrões recorrentes ou empregar especificações complexas para satisfazer as suas necessidades particulares.

A sintaxe do seletor :nth-child()

Como seletor de pseudo-classe CSS, a sintaxe :nth-child() distingue-se de outros selectores por ter um argumento que serve de padrão para identificar elementos dentro de um grupo de elementos irmãos.

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

A ênfase principal reside no conteúdo entre parênteses, que delineia um subconjunto específico de elementos a selecionar.

Utilizar valores de palavras-chave para casos comuns

Este seletor específico foi concebido para trabalhar com dois valores de palavras-chave distintos, nomeadamente “ímpar” e “par”. Estes valores provam ser altamente eficazes quando se trata de implementar um estilo de linha alternativo numa tabela.

Uma enumeração simples serve como exemplo ilustrativo de uma circunstância em que se pode empregar estas designações de palavras-chave:

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

Utilizando o seletor :nth-child(odd) , é possível modificar a tonalidade de cada item subsequente da lista com um índice ímpar:

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

Os itens são numerados a partir de 1, de modo que o item inicial será exibido em vermelho, seguido pelo terceiro item e, posteriormente, por cada terceiro item subsequente.

Notação funcional para maior flexibilidade

É possível utilizar um único número inteiro positivo para escolher um componente específico, utilizando-o da seguinte forma:

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

Neste caso, o seletor aplica-se exclusivamente ao quarto elemento da lista fornecida:

Este exemplo particular de sintaxe diz respeito à seleção de elementos com base num padrão específico, e enquadra-se na categoria mais ampla de sintaxes funcionais que executam esta função.

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

Nesta notação específica, designamos por “A” o incremento ou tamanho do passo, que significa a frequência com que o seletor avança para escolher o item subsequente. Com esta abordagem, é possível optar por selecionar itens a intervalos regulares, como, por exemplo, de dois em dois itens ou de três em três, e assim por diante.Por outro lado, “B” representa o ponto inicial a partir do qual a seleção começa.

Por exemplo, considere o argumento 3n\\+1:

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

Iniciando o processo de seleção a partir do elemento inicial, este irá então prosseguir saltando dois elementos e passando para o elemento seguinte:

Compare isto com a expressão 3n\\+2:

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

O código atualizado começará a selecionar itens a partir do segundo elemento da lista, em vez de começar pelo primeiro, mantendo o padrão de escolha a cada três itens.

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

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

A instrução dada refere-se à seleção de uma série de itens, em que começa com o terceiro elemento e continua até ao fim. A sequência resultante deve ter a forma representada abaixo:

Também se pode utilizar o processo de subtração para obter resultados específicos.

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

O exemplo dado afasta-se das práticas convencionais ao iniciar o processo de seleção a partir do índice negativo, resultando na escolha do segundo elemento da sequência, seguido do quinto termo e seguintes:

The of Sintaxe

A pseudo-classe :nth-child() permite a utilização da palavra-chave “of” acompanhada de um seletor, servindo como argumento dentro dos seus parênteses. Ao empregar esta sintaxe, é possível restringir a gama de elementos que o padrão fundamental é capaz de selecionar, aumentando assim a especificidade e precisão do processo de seleção.

Considere um cenário em que a marcação é complexa em comparação com a versão inicial:

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

Para selecionar elementos com uma classe específica e selecionar cada segundo item desse grupo utilizando CSS, é possível utilizar a pseudo-classe “:nth-child” em conjunto com o seletor da classe pretendida. Isto permite a seleção e modificação precisas de elementos específicos com base na sua posição na sequência de elementos correspondentes.

 .new {
    font-weight: bold;
}

li:nth-child(even of.new) {
    color: red;
} 

Repare no facto de apenas as entradas ímpares a negrito aparecerem a vermelho:

Adicionalmente, reflicta sobre a dissemelhança entre li.new:nth-child(even) e :target , que são selectores que, respetivamente, têm como alvo .new elementos quando são pares ou contêm um elemento filho com um ID de “moredetails”, como demonstrado na nossa instância anterior. O primeiro aplica-se às instâncias 2 e 6 na ilustração fornecida.

Trabalhar com o seletor :nth-child()

A utilização do seletor :nth-child() permite a criação de uma estética distinta através da implementação de tonalidades vibrantes no conteúdo do sítio Web, incluindo a acentuação de linhas e colunas individuais em estruturas de dados tabulares. Além disso, a integração deste seletor com selectores CSS adicionais facilita a construção de esquemas e configurações visuais complexos, tirando partido das suas capacidades combinadas.