:nth-child

La pseudo-clase :nth-child() de CSS coincide con uno o m谩s elementos en funci贸n de su posici贸n entre un grupo de hermanos.

/* Selecciona cada cuarto elemento entre
   cualquier grupo de hermanos */
:nth-child(4n) {
  color: lime;
}

Sintaxis

La pseudo-clase nth-child se especifica con un 煤nico argumento, que representa el patr贸n para los elementos coincidentes.

Valores de palabras clave

odd
Representa elementos cuya posici贸n num茅rica en una serie de hermanos es impar: 1, 3, 5, etc.
even
Representa elementos cuya posici贸n num茅rica en una serie de hermanos es par: 2, 4, 6, etc.

Notaci贸n funcional

<An+B>
Representa elementos cuya posici贸n num茅rica en una serie de hermanos coincide con el patr贸n An+B, para cada entero positivo o valor cero de n. El 铆ndice del primer elemento es 1. Los valores A y B deben ser ambos <integer>.

Sintaxis 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

Ejemplos

Selectores de ejemplo

tr:nth-child(odd)tr:nth-child(2n+1)
Representa las filas impares de una tabla HTML: 1, 3, 5, etc.
tr:nth-child(even)tr:nth-child(2n)
Representa las filas pares de una tabla HTML: 2, 4, 6, etc.
:nth-child(7)
Representa el s茅ptimo elemento.
:nth-child(5n)
Representa los elementos 5, 10, 15, etc.
:nth-child(3n+4)
Representa los elementos 4, 7, 10, 13, etc.
:nth-child(-n+3)
Representa los primeros tres elementos entre un grupo de hermanos.
p:nth-child(n)
Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p.
p:nth-child(1)p:nth-child(0n+1)
Representa cada <p> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector :first-child.

Ejemplo detallado

HTML

<h3><code>span:nth-child(2n+1)</code>, SIN un
   <code>&lt;em&gt;</code> entre los hijos.</h3>
<p>Los hijos 1, 3, 5 y 7 son seleccionados.</p>
<div class="first">
  <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>, CON un
   <code>&lt;em&gt;</code> entre los hijos.</h3>
<p>Los hijos 1, 5 y 7 son seleccionados.<br>
   3 se usa en el conteo porque es un hijo, pero
   no se selecciona porque no es un <code>&lt;span&gt;</code>.</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>Este es un `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>, CON un
   <code>&lt;em&gt;</code> entre los hijos.</h3>
<p>Los hijos 1, 4, 6 y 8 son seleccionados.<br>
   3 no se usa en el conteo ni se selecciona porque es un <code>&lt;em&gt;</code>,
   no un <code>&lt;span&gt;</code>, y <code>nth-of-type</code> solo selecciona
   hijos de ese tipo. El <code>&lt;em&gt;</code> se omite por completo y se ignora.</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>Este es un `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;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

Resultado

Especificaciones

Especificaci贸n Estado Comentarios
Selectors Level 4
La definici贸n de ':nth-child' en esta especificaci贸n.
Working Draft

Agrega la sintaxis of <selector> y especifica que no se requiere que los elementos coincidentes tengan un padre.

Selectors Level 3
La definici贸n de ':nth-child' en esta especificaci贸n.
Recommendation Definici贸n Inicial.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambi茅n