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>.
Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element is 1. The values A and B must both be <integer>s.

Sintaxis formal

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

where
<nth> = <an-plus-b> | even | odd

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo 9.5
Notas
Soporte completo 9.5
Notas
Notas Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari Soporte completo 3.1WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 9.5
Notas
Soporte completo 9.5
Notas
Notas Before Opera 15, Opera does not handle dynamically inserted elements for :nth-child().
Safari iOS Soporte completo 3.1Samsung Internet Android Soporte completo Si
of <selector> syntaxChrome Sin soporte NoEdge ? Firefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 854148.
IE ? Opera ? Safari Soporte completo 9WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 854148.
Opera Android ? Safari iOS Soporte completo 9Samsung Internet Android Sin soporte No
Matches elements with no parentChrome Soporte completo 57Edge ? Firefox Soporte completo 52IE ? Opera Soporte completo 44Safari ? WebView Android Soporte completo 57Chrome Android Soporte completo 57Edge Mobile ? Firefox Android Soporte completo 52Opera Android Soporte completo 44Safari iOS ? Samsung Internet Android Soporte completo 7.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, teoli, tuxtitlan
Última actualización por: lajaso,