Cuando trabajas con una estructura HTML y necesitas modificar únicamente el segundo elemento hijo de un contenedor, CSS te permite hacerlo de forma directa mediante la pseudoclase :nth-child().
Esta técnica resulta especialmente útil cuando quieres aplicar estilos diferentes a determinados elementos sin tener que añadir clases o identificadores adicionales al código HTML.
La forma más sencilla de seleccionar el segundo hijo de un elemento con CSS consiste en utilizar el selector :nth-child(2).
.contenedor > :nth-child(2) {
color: red;
}
Con este código estás indicando al navegador que busque dentro de .contenedor el elemento que ocupa exactamente la segunda posición entre sus hijos directos.
En este tutorial vas a aprender cómo funciona :nth-child(2), qué diferencias existen respecto a otros selectores y cómo evitar algunos errores bastante habituales.
Cómo seleccionar el segundo hijo con :nth-child(2) 🎯
La pseudoclase :nth-child() permite seleccionar un elemento dependiendo de la posición que ocupa dentro de su elemento padre.
Si escribes el número 2 entre los paréntesis, CSS seleccionará exclusivamente el elemento que sea el segundo hijo.
Imagina que tienes el siguiente código HTML:
<div class="contenedor">
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>
</div>
Para cambiar el aspecto del segundo párrafo podrías utilizar este CSS:
.contenedor p:nth-child(2) {
color: blue;
}
El resultado será que únicamente el texto correspondiente a “Segundo párrafo” aparecerá con el color azul.
Puedes consultar también el funcionamiento detallado de :nth-child() en MDN si quieres profundizar en todas las posibilidades que ofrece esta pseudoclase.
Sintaxis básica de :nth-child() 🧩
La estructura básica que debes utilizar para seleccionar un segundo hijo es realmente sencilla:
padre > elemento:nth-child(2) {
propiedad: valor;
}
El selector situado antes de :nth-child(2) determina qué tipo de elemento quieres seleccionar, mientras que el número indica la posición que debe ocupar dentro de su padre.
Por ejemplo, si tienes una lista de navegación puedes modificar solamente el segundo enlace:
<ul class="menu">
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
.menu li:nth-child(2) {
font-weight: bold;
}
En este caso, únicamente el elemento Servicios recibirá el estilo indicado.
Pasos para seleccionar el segundo hijo de un elemento ✅
Si quieres utilizar este selector correctamente en tu propia página web, puedes seguir estos pasos:
- Localiza el elemento padre que contiene los elementos sobre los que quieres trabajar.
- Comprueba qué elemento ocupa la segunda posición dentro del contenedor.
- Añade el selector
:nth-child(2)al elemento que quieras modificar. - Escribe dentro de las llaves las propiedades CSS que quieras aplicar.
- Guarda los cambios y comprueba el resultado utilizando las herramientas para desarrolladores del navegador.
- Si el selector no funciona como esperabas, revisa si existen otros elementos que estén ocupando la segunda posición real del contenedor.
Ejemplo práctico con varios elementos 🎨
Supongamos que tienes varias tarjetas dentro de una sección y quieres destacar únicamente la segunda.
<div class="tarjetas">
<div class="tarjeta">Producto 1</div>
<div class="tarjeta">Producto 2</div>
<div class="tarjeta">Producto 3</div>
</div>
Puedes utilizar el siguiente CSS:
.tarjetas .tarjeta:nth-child(2) {
border: 2px solid black;
transform: scale(1.05);
}
El navegador aplicará ambos estilos solamente a la segunda tarjeta.
Este sistema resulta especialmente práctico para crear diseños en los que determinados elementos necesiten destacar sin tener que introducir una clase como .destacado en el HTML.
Seleccionar el segundo hijo directo con CSS
En muchas ocasiones resulta recomendable utilizar el combinador > para indicar que quieres seleccionar exclusivamente un hijo directo del elemento padre.
Puedes escribirlo de esta manera:
.contenedor > :nth-child(2) {
background-color: #eee;
}
El símbolo > evita que el navegador busque coincidencias en niveles interiores de la estructura y hace que el selector sea más específico y predecible.
Por ejemplo, si .contenedor incluye otros elementos anidados, el selector afectará únicamente al segundo elemento situado directamente dentro de ese contenedor.
Diferencia entre :nth-child(2) y :nth-of-type(2) ⚠️
Uno de los errores más habituales aparece cuando se confunden las pseudoclases :nth-child() y :nth-of-type().
:nth-child(2) comprueba la posición absoluta del elemento teniendo en cuenta todos los hijos del contenedor, independientemente de sus etiquetas.
:nth-of-type(2) selecciona el segundo elemento correspondiente a un tipo concreto de etiqueta.
Observa este ejemplo:
<div class="contenido">
<h2>Título</h2>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
</div>
Si utilizas este selector:
.contenido p:nth-child(2) {
color: red;
}
El primer párrafo será seleccionado porque ese <p> ocupa realmente la segunda posición dentro del contenedor.
En cambio, si escribes:
.contenido p:nth-of-type(2) {
color: red;
}
CSS seleccionará el segundo elemento <p>, aunque este sea el tercer hijo total del contenedor.
Esta diferencia es fundamental cuando trabajas con estructuras HTML que mezclan encabezados, párrafos, imágenes, enlaces u otros elementos.
Tabla resumen de selectores
| Selector | Qué selecciona | Ejemplo de uso |
|---|---|---|
:nth-child(2) | Segundo hijo del elemento padre | .caja :nth-child(2) |
p:nth-child(2) | Un <p> que además sea el segundo hijo | .caja p:nth-child(2) |
> :nth-child(2) | Segundo hijo directo | .caja > :nth-child(2) |
p:nth-of-type(2) | Segundo <p> dentro del mismo padre | .caja p:nth-of-type(2) |
:first-child | Primer hijo | .caja :first-child |
:last-child | Último hijo | .caja :last-child |
Seleccionar el segundo elemento de una lista 📋
Uno de los usos más frecuentes de :nth-child(2) consiste en modificar un elemento concreto dentro de una lista.
Por ejemplo:
<ul class="lista">
<li>Elemento uno</li>
<li>Elemento dos</li>
<li>Elemento tres</li>
<li>Elemento cuatro</li>
</ul>
Puedes seleccionar únicamente el segundo <li> con este código:
.lista li:nth-child(2) {
text-decoration: underline;
}
Este recurso puede servirte para destacar opciones, modificar separadores, aplicar colores diferentes o alterar determinadas posiciones dentro de menús y listados.
Seleccionar el segundo hijo de varios contenedores
CSS aplicará :nth-child(2) de forma independiente dentro de cada elemento padre que coincida con el selector.
Por ejemplo:
<div class="grupo">
<span>Uno</span>
<span>Dos</span>
<span>Tres</span>
</div>
<div class="grupo">
<span>Cuatro</span>
<span>Cinco</span>
<span>Seis</span>
</div>
Si utilizas:
.grupo span:nth-child(2) {
font-size: 20px;
}
CSS seleccionará tanto “Dos” como “Cinco”, ya que ambos ocupan la segunda posición dentro de sus respectivos elementos padre.
Cómo seleccionar varios hijos mediante :nth-child() 🔢
La pseudoclase :nth-child() no está limitada a seleccionar solamente el segundo elemento, ya que puedes utilizar números, fórmulas e incluso palabras especiales.
Por ejemplo, puedes seleccionar todos los elementos pares mediante:
.elemento:nth-child(even) {
background-color: #eee;
}
También puedes seleccionar los impares:
.elemento:nth-child(odd) {
background-color: #ddd;
}
Y puedes crear patrones utilizando la fórmula an+b:
.elemento:nth-child(3n) {
font-weight: bold;
}
Este último ejemplo seleccionará los elementos situados en las posiciones 3, 6, 9, 12 y así sucesivamente.
La documentación del estándar de selectores CSS del W3C explica con más detalle estas expresiones y otras posibilidades avanzadas.
Errores habituales al seleccionar el segundo hijo ❌
El problema más frecuente consiste en pensar que p:nth-child(2) significa automáticamente “seleccionar el segundo párrafo”, cuando realmente significa “seleccionar un párrafo que sea el segundo hijo”.
También debes comprobar que tu selector no esté siendo sobrescrito por otra regla con una especificidad CSS superior.
Otro error común consiste en utilizar un selector descendiente demasiado amplio cuando realmente necesitas trabajar exclusivamente con hijos directos.
Si tienes dudas sobre qué elemento está ocupando cada posición, puedes abrir el inspector del navegador y revisar directamente la estructura del DOM.
¿Cuándo deberías utilizar :nth-child(2)? 💡
Utilizar :nth-child(2) es recomendable cuando el diseño depende de la posición del elemento y esa estructura va a mantenerse estable.
Puede resultar muy útil para modificar tarjetas, columnas, elementos de navegación, filas, bloques de contenido o cualquier componente formado por elementos repetidos.
Sin embargo, si el elemento tiene un significado especial independientemente de su posición, normalmente será más mantenible asignarle una clase específica.
Por ejemplo, si una tarjeta siempre debe aparecer destacada aunque cambie de posición, una clase como .destacada será más robusta que depender exclusivamente de :nth-child(2).
Ejemplo completo para copiar y pegar 🚀
Puedes probar directamente este pequeño ejemplo para comprobar cómo funciona el selector:
<div class="ejemplo">
<div>Primer hijo</div>
<div>Segundo hijo</div>
<div>Tercer hijo</div>
</div>
.ejemplo > div:nth-child(2) {
padding: 20px;
border: 2px solid #222;
font-weight: bold;
}
Con estas pocas líneas puedes modificar exclusivamente el segundo <div> situado dentro de .ejemplo.
Conclusión
Para seleccionar el segundo hijo de un elemento con CSS solamente necesitas utilizar :nth-child(2), indicando delante de la pseudoclase el elemento o contenedor correspondiente.
Si quieres seleccionar estrictamente el segundo hijo directo, una de las formas más claras de hacerlo es mediante .contenedor > :nth-child(2).
Cuando quieras seleccionar el segundo elemento de un tipo concreto independientemente de su posición absoluta, recuerda utilizar :nth-of-type(2) en lugar de :nth-child(2).
Dominar estas diferencias te permitirá crear hojas de estilo más limpias, precisas y fáciles de mantener, reduciendo además la necesidad de introducir clases adicionales en tu HTML.
