Pseudo-classe CSS :nth-of-type()

Definição e uso

CSS :nth-of-type(n) O pseudo-classe é usado para combinar elementos filhos que são do mesmo tipo (nome da tag) no n de elementos filhos, cada um.

n pode ser um número/índice, uma palavra-chave (ímpar ou par) ou uma fórmula (como an + b)

Dica:Ver :nth-child() O pseudo-classe é usado para escolher o elemento filho que é o n de elementos filhos, independentemente do seu tipo.

Exemplo

Exemplo 1

Como usar :nth-of-type() Seletor:

/* Escolhe o segundo elemento de irmãos div */
div:nth-of-type(2) {
  background: vermelho;
}
/* Escolhe o segundo elemento li da lista */
li:nth-of-type(2) {
  background: verde claro;
}
/* Escolhe qualquer terceiro elemento de um grupo de irmãos */
:nth-of-type(3) {
  background: amarelo;
}

Experimente você mesmo

Exemplo 2

ímpar e par é uma palavra-chave usada para combinar elementos filhos cujo índice é ímpar ou par (o índice do primeiro filho é 1).

Aqui, atribuímos cores de fundo diferentes para elementos <p> de índice ímpar e par:

p:nth-of-type(odd) {
  background: vermelho;
}
p:nth-of-type(even) {
  background: azul;
}

Experimente você mesmo

Exemplo 3

Usando a fórmula (an + b) Descrição:a Representa um passo inteiro, n é todo inteiro não negativo começando em 0,b é um deslocamento inteiro.

Aqui, atribuímos cores de fundo para todos os elementos <p> cujo índice é múltiplo de 3 (escolhendo o terceiro, sexto, nono, etc.):

p:nth-of-type(3n+0) {
  background: vermelho;
}

Experimente você mesmo

Exemplo 4

Aqui, atribuímos cores de fundo para todos os elementos <p> cujo índice é múltiplo de 3. Em seguida, subtraímos 1 (escolhendo o segundo, quinto, oitavo, etc.):

p:nth-of-type(3n-1) {
  background: vermelho;
}

Experimente você mesmo

Sintaxe CSS

:nth-of-type(índice | ímpar | par | an+b) {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o pseudo-classe.