diff options
Diffstat (limited to 'files/pt-br/web/css/_colon_nth-child/index.html')
| -rw-r--r-- | files/pt-br/web/css/_colon_nth-child/index.html | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/files/pt-br/web/css/_colon_nth-child/index.html b/files/pt-br/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..07c929d4c8 --- /dev/null +++ b/files/pt-br/web/css/_colon_nth-child/index.html @@ -0,0 +1,192 @@ +--- +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><An+B></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("<integer>")}} (inteiros).</dd> +</dl> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<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><p></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><p></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><p></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"> <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> +</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 <selector></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> |