CSS :nth-of-type() Pseudo Classe
A pseudo-classe :nth-of-type() do CSS seleciona elementos do mesmo tipo. Leia sobre a pseudo-classe e pratique com exemplos.
A pseudo-classe :nth-of-type() corresponde a elementos com base na sua posição entre irmãos do mesmo tipo (o mesmo nome de tag). A contagem começa em 1, portanto p:nth-of-type(1) é o primeiro <p> em um pai, o segundo <p> é 2, e assim por diante.
O argumento dentro dos parênteses pode ser um número único, a palavra-chave odd ou even, ou uma fórmula no formato an + b. Isso o torna uma forma flexível de estilizar "cada terceiro item", "todas as linhas pares", ou "tudo após o primeiro" sem adicionar classes extras ao seu HTML.
:nth-of-type() vs :nth-child()
Essa é a distinção que mais confunde as pessoas, por isso vale ser preciso.
:nth-child()conta todos os elementos irmãos e verifica se o elemento correspondido é do tipo solicitado.:nth-of-type()conta apenas irmãos do mesmo tipo, ignorando todo o resto.
Considere esta marcação:
<div>
<h2>Heading</h2>
<p>Paragraph A</p>
<p>Paragraph B</p>
</div>p:nth-child(2)seleciona Paragraph A — é o 2º filho no geral, e é um<p>.p:nth-of-type(2)seleciona Paragraph B — é o 2º<p>, independentemente do<h2>que vem antes.
Use :nth-of-type() quando o pai mistura diferentes tipos de elementos e você quer contar apenas um deles.
Versão
Sintaxe
Sintaxe do CSS :nth-of-type()
:nth-of-type(number | odd | even | an+b) {
css declarations;
}O argumento aceita:
- Um número —
:nth-of-type(3)seleciona o 3º elemento desse tipo. odd/even— palavras-chave convenientes para itens alternados (odd= 1, 3, 5…;even= 2, 4, 6…).- Uma fórmula
an + b— por exemplo,:nth-of-type(3n)corresponde a cada 3º elemento, e:nth-of-type(2n+1)é equivalente aodd. Aquincomeça em0e vai aumentando,aé o passo ebé o deslocamento.
Exemplo do seletor :nth-of-type():
Exemplo de código CSS :nth-of-type()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-of-type(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:nth-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Exemplo de :nth-of-type especificado como "odd" e "even":
Outro exemplo de código CSS :nth-of-type()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-of-type(odd) {
background: #1c87c9;
}
p:nth-of-type(even) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>nth-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
</body>
</html>Usando uma fórmula an+b
Uma fórmula permite selecionar um padrão repetitivo. O exemplo abaixo destaca cada 3º parágrafo (3n) e, separadamente, cada parágrafo a partir do 4º (n+4):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-of-type(3n) {
background: #8ebf42;
}
p:nth-of-type(n + 4) {
font-weight: bold;
}
</style>
</head>
<body>
<h2>nth-of-type() formula example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Com 3n, os parágrafos 3 e 6 recebem o fundo verde. Com n + 4, os parágrafos 4, 5 e 6 ficam em negrito (todo parágrafo a partir do 4º).
Vale saber
- A contagem começa em 1, não em 0.
:nth-of-type(1)é a primeira correspondência e se comporta como:first-of-type. - "Tipo" significa o nome da tag, não uma classe.
:nth-of-type()não pode contar elementos.itemespecificamente — ele conta todos os elementos com aquela tag entre os irmãos. Se você escrever.item:nth-of-type(2), ele corresponde a um elemento que é tanto o 2º do seu tipo quanto possui a classeitem. - Para contar a partir do final da lista em vez do início, use
:nth-last-of-type().
Páginas relacionadas
- Pseudo-classe CSS :nth-child()
- Pseudo-classe CSS :nth-last-of-type()
- Pseudo-classe CSS :first-of-type
- Pseudo-classe CSS :last-of-type
- Pseudo-classe CSS :only-of-type