CSS :nth-child() Pseudoclase
La pseudoclase CSS :nth-child() selecciona y estiliza elementos según su índice. Lee sobre ella y practica con ejemplos.
La pseudoclase :nth-child() selecciona elementos según su posición dentro de un grupo de hermanos. Le pasas un número, una palabra clave o una fórmula, y selecciona el hijo o hijos que coincidan — permitiéndote estilizar cada dos filas de una tabla, los primeros tres elementos de una lista o cualquier patrón repetitivo sin añadir clases extra a tu HTML.
Esta página cubre el argumento que acepta (odd, even y la fórmula An+B), muestra ejemplos ejecutables y explica la confusión más habitual: en qué se diferencia :nth-child() de :nth-of-type().
Sintaxis
selector:nth-child(argument) {
/* declarations */
}El argument es una de estas tres cosas:
- Un número entero, como
:nth-child(3)— selecciona el tercer hijo. - Una palabra clave,
oddoeven. - Una fórmula
An+B, como:nth-child(3n+1).
El conteo siempre empieza en 1 para el primer hijo (no en 0) y cuenta todos los hermanos, no solo aquellos que coincidan con el tipo de tu selector — ese detalle es el origen de la mayoría de las sorpresas (ver nth-child vs. nth-of-type).
Valores de palabra clave
odd
Selecciona los elementos en posición impar (1, 3, 5, 7, …). Es la abreviatura de la fórmula 2n+1.
even
Selecciona los elementos en posición par (2, 4, 6, 8, …). Es la abreviatura de la fórmula 2n.
odd y even son la herramienta principal para hacer "rayas de cebra" en las filas de una tabla o alternar colores en elementos de lista.
Notación funcional: An+B
La fórmula An+B selecciona cada elemento cuya posición la satisface, donde n recorre 0, 1, 2, 3, …:
Aes el tamaño del ciclo (cuántos elementos hay entre coincidencias).Bes el desplazamiento (dónde comienza el ciclo).
Analizando :nth-child(3n+1): sustituyendo n = 0, 1, 2, … se obtienen las posiciones 1, 4, 7, 10, … — cada tercer elemento empezando desde el primero.
Otros patrones útiles:
| Fórmula | Posiciones seleccionadas | Significado |
|---|---|---|
:nth-child(2n) | 2, 4, 6, … | Igual que even |
:nth-child(2n+1) | 1, 3, 5, … | Igual que odd |
:nth-child(3) | Solo 3 | Un único elemento fijo |
:nth-child(n+4) | 4, 5, 6, … | Todo desde el cuarto en adelante |
:nth-child(-n+3) | 1, 2, 3 | Solo los tres primeros |
A y B deben ser enteros. Un A negativo cuenta hacia atrás, que es como -n+3 selecciona solo los tres primeros hijos.
Versión
Ejemplos
Seleccionar un único elemento
Ejemplo de código :nth-child()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3) {
background: #ccc;
}
</style>
</head>
<body>
<h2>:nth-child selector example</h2>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>Solo el tercer <p> recibe un fondo gris.
Usar las palabras clave "odd" y "even"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Usar una fórmula An+B
Este ejemplo usa :nth-child(3n) para resaltar cada tercer elemento de la lista:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(3n) {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>Los elementos 3 y 6 se resaltan, porque 3n da como resultado 3 y 6.
nth-child vs. nth-of-type
Esta es la trampa que pilla a la mayoría de la gente. :nth-child() cuenta todos los hermanos y luego comprueba si el elemento seleccionado también es del tipo correcto. No cuenta "el enésimo elemento de este tipo."
Considera este marcado:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>Aquí p:nth-child(2) selecciona el primer <p> — porque el <p> está en la posición de hijo 2 (el <h2> ocupa la posición 1). Escribir p:nth-child(1) no seleccionaría nada, ya que la posición 1 es el encabezado, no un párrafo.
Si quieres "el segundo párrafo independientemente de lo que le preceda," usa :nth-of-type() en su lugar, que solo cuenta los elementos del mismo tipo.
Selectores relacionados
:nth-of-type()— como:nth-child()pero solo cuenta hermanos del mismo tipo de elemento.:nth-last-child()— misma sintaxis de fórmula, pero cuenta desde el último hermano hacia atrás.:first-childy:last-child— abreviaturas para el primer y último hermano.- CSS Selectors — descripción general de todos los tipos de selectores.