você está aqui: Home  → Arquivo de Mensagens

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á:

  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ê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.

Saiba mais: Facebook , Twitter.



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

 

 

Opinião dos Leitores

Maujor
11 Out 2017, 19:36
Obrigado @Leo
A série continua.
Leo
02 Out 2017, 12:07
Nao pare com essa serie!
Esta sendo otima pra dar uma atualizada no meu conhecimento CSS.

Os dinossauros da web agradecem :)
*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