Pseudo-clases estructurales en CSS para seleccionar hijos

Las pseudo-clases estructurales en CSS son selectores basados en la posición del elemento dentro de su contenedor.

Ya hemos visto cómo seleccionar elementos por etiqueta (p), clase (.boton) o ID (#cabecera). Eso está bien para decir “quiero este tipo de elemento”.

Pero muchas veces queremos algo más fino: el primer elemento de una lista, el último enlace de un menú, las filas pares de una tabla o cada tercera tarjeta de una galería.

Para eso usamos pseudo-clases estructurales. No miran si el usuario está encima con el ratón, ni si un campo tiene foco. Miran dónde está colocado el elemento dentro del árbol HTML.

Primer y último elemento

Las pseudo-clases y ` seleccionan un elemento si es, respectivamente, el primer o el último hijo de su padre.

li:first-child {
    font-weight: bold;
}

li:last-child {
    border-bottom: none;
}

Esto es muy habitual para quitar separadores del último elemento de una lista, destacar el primer resultado o ajustar márgenes sin tener que añadir clases extra en el HTML.

<ul class="menu">
    <li>Inicio</li>
    <li>Servicios</li>
    <li>Contacto</li>
</ul>

Seleccionar por posición con :nth-child()

La pseudo-clase () selecciona elementos según su posición entre hermanos. Es perfecta para listas, tablas o colecciones repetidas.

/* Filas pares de una tabla */
tr:nth-child(even) {
    background-color: #f5f5f5;
}

/* El tercer elemento de una lista */
li:nth-child(3) {
    font-weight: bold;
}

Esto nos permite crear patrones visuales sin llenar el HTML de clases artificiales.

<ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ul>

/* Elementos pares */
li:nth-child(even) {
    background-color: #f8fafc;
}

/* Elementos impares */
li:nth-child(odd) {
    background-color: white;
}

/* El cuarto elemento */
li:nth-child(4) {
    color: #dc2626;
}

/* Cada 3 elementos */
li:nth-child(3n) {
    font-weight: bold;
}

/* Desde el cuarto elemento en adelante */
li:nth-child(n + 4) {
    color: #64748b;
}

/* Los tres primeros */
li:nth-child(-n + 3) {
    border-top: 3px solid #2563eb;
}

/* Cada dos elementos empezando por el tercero */
li:nth-child(2n + 3) {
    background: #f1f5f9;
}

:nth-of-type()

La pseudo-clase :key[:nth-of-type()] se parece a :nth-child(), pero solo cuenta elementos del mismo tipo de etiqueta.

<section>
    <h2>Título</h2>
    <p>Primer párrafo</p>
    <p>Segundo párrafo</p>
    <p>Tercer párrafo</p>
</section>

/* Selecciona el segundo párrafo, ignorando el h2 */
p:nth-of-type(2) {
    background: #fef3c7;
}

Con p:nth-child(2) seleccionaríamos el primer párrafo, porque es el segundo hijo de section. Con p:nth-of-type(2) seleccionamos el segundo <p>. La diferencia está en qué está contando el navegador.

Otros selectores estructurales útiles

Hay algunas pseudo-clases más que conviene tener localizadas, aunque no las uséis todos los días.

.mensaje:empty {
    display: none;
}

article p:first-of-type {
    font-size: 1.1rem;
}