Selectores: elemento, clase, id, atributo y combinadores

Los selectores son el idioma con el que le hablas al CSS. Dominarlos es la diferencia entre "le puse una clase a cada etiqueta porque no sé apuntar" y código elegante que apunta con precisión quirúrgica. Esta lección es de las más importantes del curso — tómate tu tiempo.

Los cuatro selectores base

/* Por elemento: TODOS los párrafos */
p { color: #334155; }

/* Por clase: los elementos con class="destacado" — EL selector del día a día */
.destacado { background: #fef9c3; }

/* Por id: EL elemento con id="cabecera" (los ids son únicos por página) */
#cabecera { padding: 20px; }

/* Por atributo: los inputs de tipo email */
input[type="email"] { border-color: #6d28d9; }

En el HTML, las clases se asignan con class="destacado" — y un elemento puede tener varias separadas por espacio: class="tarjeta destacado".

Los combinadores: seleccionar por parentesco

Aquí los selectores se vuelven un lenguaje. Cuatro símbolos, memorízalos con sus nombres:

/* ESPACIO — descendiente: los a DENTRO de nav (a cualquier profundidad) */
nav a { color: white; }

/* > — hijo directo: solo los li que son hijos inmediatos de .menu */
.menu > li { display: inline-block; }

/* + — hermano adyacente: el p que viene JUSTO después de un h2 */
h2 + p { font-size: 18px; }

/* ~ — hermanos siguientes: TODOS los p que siguen a un h2 (mismo padre) */
h2 ~ p { color: #475569; }

Míralos en acción:

<h2>Un título h2</h2>
<p>Soy el hermano adyacente (h2 + p): más grande.</p>
<p>Soy hermano siguiente (h2 ~ p): gris, pero no más grande.</p>
<div class="caja">
<p>Yo estoy DENTRO de .caja (.caja p): con fondo.</p>
</div>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
h2 + p { font-size: 20px; font-weight: 600; }
h2 ~ p { color: #475569; }
.caja p { background: #ede9fe; padding: 8px; border-radius: 6px; }

Detalle fino del ejemplo: el primer párrafo recibe DOS reglas (h2 + p y h2 ~ p) porque es a la vez adyacente y hermano siguiente. Los selectores no compiten por exclusividad — se acumulan. Quién gana cuando declaran la misma propiedad es el tema de la próxima lección.

Agrupar selectores

Una coma aplica la misma regla a varios objetivos:

h1, h2, h3 {
font-family: "Space Grotesk", sans-serif;
line-height: 1.2;
}

Mini-reto

En tu periódico: pinta los enlaces del nav principal de un color usando header nav a (sin tocar los del footer), y dale fondo amarillo suave SOLO al primer párrafo después de cada titular h3 con h3 + p. Si el footer quedó intacto, ya piensas en selectores.

Qué sigue

Acabas de ver que varias reglas pueden apuntar al mismo elemento. ¿Quién gana cuando se contradicen? Eso es la especificidad y la cascada — el tema que más frustra a quienes no lo estudian y el que tú vas a dominar en la próxima lección.