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

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:

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.