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á:
- um número inteiro igual a b ( se a = 0 e b diferente de 0 )
- 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.