Pseudo-classes :nth-child() do CSS

Definição e uso

CSS :nth-child(n)}} pseudo-classe para combinar elementos que são o n elementos filhos

Este pseudo-classe combina elementos com base no índice do elemento na lista de filhos do pai do elemento.

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

Dica:Ver :nth-of-type() pseudo-classe para escolher como filho do elemento paido mesmo tipo (nome do elemento)do n elementos filhos.

Exemplo

Exemplo 1

Como usar :nth-child() Pseudo-classe:

/* Escolhe qualquer quarto elemento de um grupo de irmãos */
:nth-child(4) {
  cor-fundo: amarelo;
}
/* Escolhe o segundo elemento entre os irmãos div */
div:nth-child(2) {
  cor-fundo: vermelho;
}
/* Escolhe o segundo elemento li da lista */
li:nth-child(2) {
  cor-fundo: verde-claro;
}

Experimente você mesmo

Exemplo 2

ímpar e par É uma palavra-chave, usada para combinar elementos cujos índices são ímpares ou pares (o índice do primeiro filho é 1).

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

p:nth-child(ímpar) {
  cor-fundo: vermelho;
}
p:nth-child(even) {
  fundo: verde-claro;
}

Experimente você mesmo

Exemplo 3

Usando a fórmula (an + b) Descrição:a Representa um passo inteiro, n é todos os inteiros não negativos a partir de 0,b É um deslocamento inteiro.

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

p:nth-child(3n+1) {
  cor-fundo: vermelho;
}

Experimente você mesmo

Exemplo 4

Aqui, atribuímos a cor de fundo para todos os elementos <p> cujo índice é múltiplo de 3. Em seguida, subtraímos 1 (escolhemos o primeiro, quarto, sétimo, etc.):

p:nth-child(3n-1) {
  cor-fundo: vermelho;
}

Experimente você mesmo

Sintaxe CSS

:nth-child(í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.