---
title: ':nth-child()'
slug: 'Web/CSS/:nth-child'
tags:
  - Pseudo-classe
  - Referencia
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>

<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <code>:nth-child()</code> seleciona elementos com base em suas posições em um grupo de elementos irmãos.</p>

<pre class="brush: css no-line-numbers">/* 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;
}
</pre>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

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

<h3 id="Valores">Valores</h3>

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

<h3 id="Notação_funcional">Notação funcional</h3>

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

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">Exemplos</h2>

<h3 id="Example_selectors" name="Example_selectors">Exemplos de seletores</h3>

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

<dl>
 <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt>
 <dd>Representa do 8º até o 15º elementos <code>&lt;p&gt;</code> de um grupo de irmãos.</dd>
</dl>

<h3 id="Exemplo_detalhado">Exemplo detalhado</h3>

<h4 id="HTML">HTML</h4>

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

&lt;br&gt;

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

&lt;br&gt;

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

<h4 id="CSS">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Resultado">Resultado</h4>

<p>{{ EmbedLiveSample('Exemplo_detalhado', '', 550, '', 'Web/CSS/:nth-child') }}</p>

<p> </p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Adiciona a sintaxe <code>of &lt;selector&gt;</code> e especifica que os elementos correspondentes ao seletor não precisam ter um elemento pai.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>

<div>
<div class="hidden">A tabela de compatibilidade nesta página foi gerada a partir de dados estruturados. Se você quiser contribuir para esses dados, vá para <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma pull request.</div>

<p>{{Compat("css.selectors.nth-child")}}</p>
</div>

<h2 id="See_also" name="See_also">Veja também</h2>

<ul>
 <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
</ul>