:nth-child()

pseudo-classe CSS :nth-child() seleciona elementos com base em suas posições em um grupo de elementos irmãos.

/* Seleciona um a cada quatro elementos
   de qualquer grupo de elementos irmãos,
   começando do quarto elemento (4, 8 12, etc.). */
:nth-child(4n) {
  color: lime;
}

Sintaxe

A pseudo-classe nth-child é usada com apenas um argumento, que representa o padrão usado para selecionar os elementos.

Valores

odd
Representa elementos cuja posição numérica em uma série de irmãos seja ímpar: 1, 3, 5, etc.
even
Representa elementos cuja posição numérica em uma série de irmãos seja par: 2, 4, 6, etc.

Notação funcional

<An+B>
Representa elementos cuja posição numérica em uma série de irmãos corresponda ao padrão An+B, o qual será aplicado a todo número maior ou igual a zero (ou seja, começando do zero). O índice do primeiro elemento é 1. Ambos os valores A e B devem ser <integer> (inteiros).

Sintaxe formal

:nth-child( <nth> [ of <complex-selector-list> ]? )

where
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#

where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Exemplos

Exemplos de seletores

tr:nth-child(odd) or tr:nth-child(2n+1)
Representa as linhas ímpares de uma tabela HTML: 1, 3, 5, etc.
tr:nth-child(even) or tr:nth-child(2n)
Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc.
:nth-child(7)
Representa o sétimo elemento.
:nth-child(5n)
Representa os elementos de número 5 [=5×1], 10 [=5×2], 15 [=5×3], etc.
:nth-child(3n+4)
Representa os elementos de número 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.
:nth-child(-n+3)
Representa os primeiros três elementos. [=-0+3, -1+3, -2+3]
p:nth-child(n)
Representa todos os elementos <p> em um grupo de irmãos. Isso seleciona os mesmos elementos que um simples seletor p faria (só que com um nível maior de especificidade).
p:nth-child(1) or p:nth-child(0n+1)
Representa todo <p> que seja o primeiro de seu grupo de irmãos. Ele é idêntico ao seletor :first-child (e tem o mesmo nível de especificidade).
p:nth-child(n+8):nth-child(-n+15)
Representa do 8º até o 15º elementos <p> de um grupo de irmãos.

Exemplo detalhado

HTML

   <h3><code>span:nth-child(2n+1)</code>, SEM um
<code>&lt;em&gt;</code> entre os elementos filhos.</h3>
<p>Os filhos 1, 3, 5 e 7 são selecionados.</p>
<div class="primeiro">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h3><code>span:nth-child(2n+1)</code>, COM um
   <code>&lt;em&gt;</code> entre os elementos filhos.</h3>
<p>Os filhos 1, 5 e 7 são selecionados.<br>
   O 3 está incluído na contagem por ser um filho, mas não é
   selecionado porque ele não é um <code>&lt;span&gt;</code>.</p>
<div class="segundo">
  <span>Span!</span>
  <span>Span</span>
  <em>Este é um `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h3><code>span:nth-of-type(2n+1)</code>, COM um
   <code>&lt;em&gt;</code> entre os elementos filhos.</h3>
<p>Os filhos 1, 4, 6 e 8 são selecionados.<br>
   O 3 não está incluso na contagem nem é selecionado porque ele é um <code>&lt;em&gt;</code>, 
   não um <code>&lt;span&gt;</code>, e <code>nth-of-type</code> seleciona apenas os
   filhos desse último tipo. O <code>&lt;em&gt;</code> é completamente
   pulado e ignorado.</p>
<div class="terceiro">
  <span>Span!</span>
  <span>Span</span>
  <em>Este é um `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.primeiro span:nth-child(2n+1),
.segundo span:nth-child(2n+1),
.terceiro span:nth-of-type(2n+1) {
  background-color: lime;
}

Resultado

 

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':nth-child' in that specification.
Rascunho atual Adiciona a sintaxe of <selector> e especifica que os elementos correspondentes ao seletor não precisam ter um elemento pai.
Selectors Level 3
The definition of ':nth-child' in that specification.
Recomendação Definição inicial.

Compatibilidade de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:nth-child()Chrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 9.5
Notes
Full support 9.5
Notes
Notes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1
Notes
Full support 10.1
Notes
Notes Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari iOS Full support 3.1Samsung Internet Android Full support Yes
Matches elements with no parentChrome Full support 57Edge No support NoFirefox Full support 52IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 52Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0
of <selector> syntaxChrome No support No
Notes
No support No
Notes
Notes See bug 304163.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 854148.
IE No support NoOpera No support NoSafari Full support 9WebView Android No support NoChrome Android No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 854148.
Opera Android No support NoSafari iOS Full support 9Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

Veja também