Maquetación Web Dinámica / Pseudo-clases y pseudo-elementos: el arsenal secreto
Estructurales: :nth-child y las fórmulas an+b
Seleccionar "el primero", "el último", "los pares", "cada tercero" — sin agregar una sola clase al HTML. Las pseudo-clases estructurales seleccionan por POSICIÓN, y su corazón es la mini-matemática an+b que hoy dejarás de copiar sin entender.
Los básicos de posición
Ojo al matiz que atrapa a todos: :first-child significa "soy el primer
hijo DE MI PADRE", no "el primero de mi tipo". Si un h2 precede a tus
li... nada de nada. Para "el primero de mi tipo" existe
:first-of-type — mismo juego, contando solo elementos de tu etiqueta.
:nth-child(an+b): la fórmula descifrada
:nth-child() acepta una fórmula donde n cuenta 0, 1, 2, 3...:
| Fórmula | Genera | Selecciona |
|---|---|---|
2n (o even) | 2, 4, 6... | los pares — el cebrado clásico |
2n+1 (o odd) | 1, 3, 5... | los impares |
3n | 3, 6, 9... | cada tercero |
3n+1 | 1, 4, 7... | cada tercero, empezando por el 1° |
n+4 | 4, 5, 6... | del cuarto en adelante |
-n+3 | 3, 2, 1 | SOLO los tres primeros |
<p class="t">tr:nth-child(even) — la tabla cebrada</p>
<table>
<tr><td>Fila 1</td><td>dato</td></tr>
<tr><td>Fila 2</td><td>dato</td></tr>
<tr><td>Fila 3</td><td>dato</td></tr>
<tr><td>Fila 4</td><td>dato</td></tr>
</table>
<p class="t">li:nth-child(-n+3) — solo el podio</p>
<ol class="ranking"><li>Oro</li><li>Plata</li><li>Bronce</li><li>Cuarto</li><li>Quinto</li></ol>body { font-family: system-ui; padding: 20px; color: #1e293b; }
.t { font-size: 12px; color: #64748b; margin: 0 0 6px; }
table { border-collapse: collapse; width: 100%; margin-bottom: 16px; font-size: 14px; }
td { padding: 6px 12px; border: 1px solid #e2e8f0; }
tr:nth-child(even) { background: #f1f5f9; }
.ranking { margin: 0; padding-left: 24px; font-size: 14px; }
.ranking li { padding: 3px 0; color: #94a3b8; }
.ranking li:nth-child(-n+3) { color: #b45309; font-weight: 700; }El refinamiento moderno: of selector
:nth-child cuenta TODOS los hijos — incluidos los que no te interesan.
La sintaxis moderna cuenta solo lo que tú digas:
Sin el of, filtrar una fila rompía el cebrado (dos grises seguidos). Con
él, la cuenta se hace sobre el subconjunto. Soporte: navegadores modernos
desde 2023.
Quieres destacar SOLO las 3 primeras noticias de una lista. ¿La fórmula?
Mini-reto
En tu periódico: cebra la tabla del clima con nth-child(even), quita el
borde del último ítem de "Lo más leído" con :last-child, y dale peso
extra a los 3 primeros del ranking con -n+3. Tres patrones de posición,
cero clases nuevas.
Qué sigue
Seleccionas por posición. La próxima lección COMBINA selectores con elegancia: :not() para excluir, :is() para agrupar sin repetirte y :where() — el que tiene especificidad cero, y eso es un superpoder.