você está aqui: Home  → Arquivo de Mensagens

Seletores CSS - As pseudoclasses :nth-child() e :nth-last-child()

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 28 de setembro de 2017

Pseudoclasse é um tipo de seletor CSS que permite seleção baseada em informações não contidas explicitamente na árvore do documento. A sintaxe de um seletor do tipo pseudoclasse consiste em um //seletor simples //seguido de dois pontos ( : ) e o nome da pseudoclasse. Nessa dica mostraremos as pseudoclasses :nth-child() e :nth-last-child()

Essas pseudoclasses se destinam a selecionar elementos-filho de um container de acordo com a posição que ocupam na sequência da marcação. Por exemplo: possibilitam que se selecione o terceiro, o sétimo, o vigésimo item de uma lista não ordenada.

Ao usar-se a pseudoclasse :nth-child() a contagem feita do primeiro para o último elemento-filho e :nth-last-child() a contagem feita do último para o primeiro elemento-filho.

Tecnicamente essas pseudoclasses são funções CSS que admitem um parâmetro.

O parâmetro da função é uma expressão algébrica do tipo an + b sendo a e b um número inteiro positivo, negativo ou zero e n um número inteiro variando de zero ao infinito.

O retorno da expressão algébrica será:

  1. um número inteiro igual a b ( se a = 0 e b diferente de 0 )
  2. uma série de números inteiros ( se a diferente de 0 e qualquer valor de b ) gerada com n variando de 0 ao infinito.

A sintaxe CSS prevê também as palavras-chaves even ( par ) e odd ( ímpar ) a serem usadas como parâmetro da função. Elas selecionam os elementos-filhos em posição par e ímpar respectivamente.

Os exemplos a seguir esclarecem o que foi dito.

seletor :nth-child()
Seletor Seleção
div > p:nth-child(8) seleciona o oitavo parágrafo elemento-filho do div
ul > li:nth-child(n + 4) seleciona os itens da lista nas posições 4, 5, 6 etc, ou seja
seleciona todos os itens a partir do item 4 inclusive
ul > li:nth-child(3n + 2) seleciona os itens da lista nas posições 2, 5, 8 etc, ou seja a partir do item 2 inclusive com pulos de 3
ul > li:nth-child(even) seleciona os itens da lista nas posições 2, 4, 6 etc
seletor :nth-last-child()
div > p:nth-last-child(8) seleciona o oitavo parágrafo (contado do último para o primeiro) elemento-filho do div
ul > li:nth-last-child(n + 4) seleciona os itens da lista nas posições 4, 5, 6 etc (contadas da última para a primeira), ou seja seleciona todos os itens a partir do item 4 inclusive contado de trás para frente
ul > li:nth-last-child(3n + 2) seleciona os itens da lista nas posições 2, 5, 8 etc (contadas da última para a primeira), ou seja a partir do item 2 inclusive contado de trás para frente com pulos de 3
ul > li:nth-last-child(even) seleciona os itens da lista nas posições 19, 17, 15 etc

Considere uma lista com vinte items.

As oito regras CSS mostradas na tabela anterior quando aplicadas individualmente a essa lista, na ordem em que foram apresentadas, estilizariam os seguintes itens da lista:

  • 1a. regra: item número 8.
  • 2a. regra: itens 4 at 20.
  • 3a. regra: itens 2, 5, 8, 11, 14,17 e 20.
  • 4a. regra: itens 2, 4, 6, 8, ..., e 20.
  • 5a. regra: item número 13.
  • 6a. regra: itens 17 at 1 (contagem regressiva).
  • 7a. regra: itens 19, 16, 13, 10, 7, 4, 1 (contagem regressiva).
  • 4a. regra: itens 19, 17, 15, 13, ..., e 1. (contagem regressiva).

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.



Veja a relação completa dos artigos de Maurício (Maujor) Samy Silva

 

 

Opinião dos Leitores

Seja o primeiro a comentar este artigo
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script