CSS :nth-child() Pseudo Classe
A pseudo-classe CSS :nth-child() seleciona e estiliza elementos com base em seu índice. Veja exemplos práticos e aprenda a usá-la.
A pseudo-classe :nth-child() seleciona elementos com base na posição deles dentro de um grupo de irmãos. Você passa um número, uma palavra-chave ou uma fórmula, e ela seleciona o filho ou filhos correspondentes — permitindo que você estilize cada linha alternada de uma tabela, os primeiros três itens de uma lista, ou qualquer padrão repetido sem adicionar classes extras ao seu HTML.
Esta página cobre o argumento aceito (odd, even e a fórmula An+B), mostra exemplos executáveis e explica o ponto de confusão mais comum: como :nth-child() difere de :nth-of-type().
Sintaxe
selector:nth-child(argument) {
/* declarations */
}O argument é uma das três coisas:
- Um número único, como
:nth-child(3)— seleciona o terceiro filho. - Uma palavra-chave,
oddoueven. - Uma fórmula
An+B, como:nth-child(3n+1).
A contagem sempre começa em 1 para o primeiro filho (não em 0), e conta todos os irmãos, não apenas aqueles que correspondem ao tipo do seletor — esse detalhe é a fonte da maioria das surpresas (veja nth-child vs. nth-of-type).
Valores de palavra-chave
odd
Seleciona elementos em posição ímpar (1, 3, 5, 7, …). É um atalho para a fórmula 2n+1.
even
Seleciona elementos em posição par (2, 4, 6, 8, …). É um atalho para a fórmula 2n.
odd e even são amplamente usados para estilização "zebrada" de linhas de tabela ou cores alternadas em itens de lista.
Notação funcional: An+B
A fórmula An+B seleciona todo elemento cuja posição a satisfaz, onde n percorre 0, 1, 2, 3, …:
Aé o tamanho do ciclo (quantos elementos entre correspondências).Bé o deslocamento (onde o ciclo começa).
Percorrendo :nth-child(3n+1): substitua n = 0, 1, 2, … para obter as posições 1, 4, 7, 10, … — todo terceiro elemento a partir do primeiro.
Outros padrões úteis:
| Fórmula | Posições selecionadas | Significado |
|---|---|---|
:nth-child(2n) | 2, 4, 6, … | Igual a even |
:nth-child(2n+1) | 1, 3, 5, … | Igual a odd |
:nth-child(3) | apenas 3 | Um único elemento fixo |
:nth-child(n+4) | 4, 5, 6, … | Tudo a partir do 4º em diante |
:nth-child(-n+3) | 1, 2, 3 | Apenas os três primeiros |
A e B devem ser inteiros. Um A negativo conta de trás para frente, que é como -n+3 seleciona apenas os três primeiros filhos.
Versão
Exemplos
Selecionando um único elemento
Exemplo de código :nth-child()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3) {
background: #ccc;
}
</style>
</head>
<body>
<h2>:nth-child selector example</h2>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>Apenas o terceiro <p> recebe um fundo cinza.
Usando as palavras-chave "odd" e "even"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Usando uma fórmula An+B
Este exemplo usa :nth-child(3n) para destacar cada terceiro item da lista:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(3n) {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>Os itens 3 e 6 são destacados, porque 3n resulta em 3 e 6.
nth-child vs. nth-of-type
Esta é a armadilha que pega a maioria das pessoas. :nth-child() conta todos os irmãos e depois verifica se o elemento correspondente também é do tipo correto. Ele não conta "o nth elemento deste tipo".
Considere esta marcação:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>Aqui p:nth-child(2) seleciona o primeiro <p> — porque o <p> está na posição filho 2 (o <h2> é a posição 1). Escrever p:nth-child(1) não corresponderia a nada, já que a posição 1 é o cabeçalho, não um parágrafo.
Se você quer "o segundo parágrafo independentemente do que vem antes dele," use :nth-of-type() em vez disso, que conta apenas elementos do mesmo tipo.
Seletores relacionados
:nth-of-type()— como:nth-child(), mas conta apenas irmãos do mesmo tipo de elemento.:nth-last-child()— mesma sintaxe de fórmula, mas conta a partir do último irmão de trás para frente.:first-childe:last-child— atalhos para o primeiro e o último irmão.- CSS Selectors — visão geral de cada tipo de seletor.