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: 29 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-of-type() e :nth-last-of-type()
Essas pseudoclasses se destinam a selecionar elementos-filho ( de determinado tipo ) de um container de acordo com a posição que ocupam na marcação. Por exemplo: possibilitam que se selecione o terceiro, o sétimo, o vigésimo elemento p, div, h3, etc.
Ao usar-se a pseudoclasse :nth-of-type() a contagem é feita do primeiro para o último elemento-filho de determinado tipo e :nth-last-of-type() a contagem é feita do último para o primeiro elemento-filho de determinado tipo. Assim, nos textos seguintes, tudo o que dissermos para a primeira pseudoclasse é válido para a segunda com inversão da contagem dos elementos-filhos.
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êm 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.
</OL>
Considere um elemento container com vários elementos-filhos de diferentes tipos em diferentes posições.
el:nth-child(N) seleciona o elemento-filho el se ele estiver na posição N.
:nth-child(N) seleciona o elemento-filho na posição N independente do seu tipo.
el:nth-of-type(N) seleciona o N-ésimo elemento-filho do tipo el.
:nth-of-type(N) seleciona os N-ésimos elementos-filhos de cada tipo encontrados no container.
Vamos mostrar a diferença e a sintaxe dessas pseudoclasses com um exemplo prático.
Considere a estrutura de marcação HTML conforme mostrada a seguir.
<div class"container">
<header>HEADER 1</header>
<p>P1</p>
<span>SPAN1</span>
<span>SPAN2</span>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<strong>STRONG1</strong>
<span>SPAN3</span>
<header>HEADER2</header>
<p>P6</p>
<p>P7</p>
<span>SPAN4</span>
<strong>STRONG2</strong>
</div>
As seguintes regras CSS aplicadas àquela estrutura de marcação HTML e as respectivas seleções são conforme mostradas a seguir.
| Seletor | Seleção |
|---|---|
| .container > p:nth-child(2) | seleciona P1 |
| .container > p:nth-of-type(2) | seleciona P2 |
| .container > p:nth-child(4) | nada selecionado, pois o quarto elemento-filho o SPAN 2 |
| .container > p:nth-of-type(4) | seleciona P4 |
| .container > :nth-child(2) | seleciona P1 |
| .container > :nth-of-type(2) | seleciona SPAN 2, P 2, HEADER 2 E STRONG 2 |
| .container > :nth-child(n + 3) | seleciona tudo desde SPAN 1 inclusive at o final STRONG 2 |
| .container > :nth-of-type(n + 3) | seleciona de P 3 inclusive at P 7, SPAN 3 E SPAN 4 |
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.