MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Tradução em progresso.

Summary

:nth-child(an+b) CSS pseudo-class corresponde um elemento que tem  an+b-1 irmão antes na árvore de documento, para um dado valor positivo ou zero para n, e tem um elemento pai. Em resumo, o seletor corresponde ao número de elementos filhos cuja posição numérica na série de filhos corresponde ao padrão an+b.

Alguns exemplos:

  • 1n+0, ou simplesmente n, corresponderia a todos elementos filhos. n não corresponde no Browser do Android 4.3 e inferior enquanto 1n corresponde. 1n faz a mesma coisa que 1n+0. Sinta-se a vontade para usar o que lhe parecer melhor.
  • 2n+0, ou simplesmente 2n, corresponderia aos elementos 2, 4, 6, 8, etc. Você pode substituir essa expressão por even.
  • 2n+1 corresponderia aos elementos 1, 3, 5, 7, etc. Você pode substituir essa expressão por odd.
  • 3n+4 corresponderia aos elementos 4, 7, 10, 13, etc.

Os valores a e b devem ser ambos inteiros, e o índice de um elemento first child é 1. Em outras palavras, essas classes correspondem a todos os filhos cujo índice cai na configuração { an + b; n = 0, 1, 2, ... }.

Um caso comum de uso é para corresponde a outras linhas na tabela.

Sintaxe

elemento:nth-child(an + b) {propiedades de stilo }

Examplos

Examplo de seletores

tr:nth-child(2n+1)
Representa as linhas ímpares de uma tabela HTML.
tr:nth-child(odd)
Representa as linhas ímpares de uma tabela HTML.
tr:nth-child(2n)
Representa as linhas pares de uma tabela HTML.
tr:nth-child(even)
Representa as linhas pares de uma tabela HTML.
span:nth-child(0n+1)
Representa um elemento span span na qual é o primeiro elemento de seu pai; isso é o mesmo que o seletor :first-child.
span:nth-child(1)
Equivalente ao exemplo acima.
span:nth-child(-n+3)
Corresponde se o elemento é um dos 3 primeiros filhos de seu pai e também é span.

Exemplo completo

O seguinte HTML...

<p><code>span:nth-child(2n+1)</code>, <em>sem</em> um <code>&lt;em&gt;</code>
 dentro de seus elementos filhos. Filho 1, 3, 5, and 7 são selecionados, como esperado.</p>

<div class="first">
      <span>Essa span é selecionada!</span>
      <span>Essa span não é. :(</span>
      <span>Que tal essa?</span>
      <span>E essa aqui?</span>
      <span>Outro exemplo</span>
      <span>Ainda outro exemplo</span>
      <span>Eeeeeeee outro</span>
</div>

<p><code>span:nth-child(2n+1)</code>, <em>com</em> um <code>&lt;em&gt;</code>
 dentro dos elementos filhos. Filhos 1, 5, e 7 são selecionados. 3 é usado na contagem
 counting porque é um filho, mas não é selecionado porque não é um 
<code>&lt;span&gt;</code>.</p>

<div class="second">
      <span>Essa span é selecionada!</span>
      <span>Essa span não é. :(</span>
      <em>Esse aqui é um em.</em>
      <span>Que tal essa?</span>
      <span>E essa aqui?</span>
      <span>Outro exemplo</span>
      <span>Ainda outro exemplo</span>
      <span>Eeeeeeee outro</span>
</div>

<p><code>span:nth-de-tipo(2n+1)</code>, <em>com</em> um <code>&lt;em&gt;</code>
 dentro dos elementos filhos. Filhos 1, 4, 6, e 8 são selecionados. 3 não é
 usado na contagem ou selecionado porque é um <code>&lt;em&gt;</code>, 
não um <code>&lt;span&gt;</code>, e <code>nth-de-tipo</code> seleciona somente
 filhos daquele tipo. O <code>&lt;em&gt;</code> é completamente ignorado.</p>
 
  <div class="third">
      <span>Essa span é selecionada!</span>
      <span>Essa span não é. :(</span>
      <em>Esse aqui é um em.</em>
      <span>Que tal essa?</span>
      <span>E essa aqui?</span>
      <span>Outro exemplo</span>
      <span>Ainda outro exemplo</span>
      <span>Eeeeeeee outro</span>
</div>

...usando esse CSS...

html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
    
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

...vai resultar em:

 

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':nth-child' in that specification.
Rascunho atual Sem mudança.
Selectors Level 3
The definition of ':nth-child' in that specification.
Recomendação Definição inicial.

Browser compatibility

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Notas

  • Opera não pode manipular inserções dinâmicas de elementos.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: welitonderesende, ricardoferreirades, cynthiapereira, alexfqc
 Última atualização por: welitonderesende,