Seletores CSS - As pseudoclasses - nth-of-type() e :nth-last-of-type()
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á:
- 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ê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>
Diferença entre :nth-child() e nth-of-type()
Considere um elemento container com vários elementos-filhos de diferentes tipos em diferentes posições.
:nth-child()
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.
nth-of-type()
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.
Exemplo prático
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 |
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.