De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.
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á:
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:
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.