Selectores

Un selector es la parte de una regla CSS que responde a la pregunta: ¿a qué elementos del HTML se le aplican estas declaraciones? Sin selector, las declaraciones no tienen destino. El selector es la mitad izquierda de cada regla — el mecanismo con el que CSS “apunta” al árbol HTML para aplicarle estilos.

Existen muchos tipos de selectores, y la potencia real de CSS viene de combinarlos. Un selector puede ser tan simple como el nombre de una etiqueta (p aplica a todos los párrafos) o tan preciso como una cadena que apunta a un solo elemento en toda la página. Aprender los tipos de selector disponibles, cuándo usar cada uno y cuánta especificidad genera cada uno es el núcleo del trabajo cotidiano con CSS.

La elección del selector también determina la especificidad: cuánta “autoridad” tiene esa regla para imponerse sobre otras que apunten al mismo elemento. Un selector de ID tiene más peso que uno de clase, que tiene más peso que uno de tipo. Esto significa que elegir el selector correcto no es solo una cuestión de “apuntar al elemento correcto” — también es una decisión sobre cuán fácil o difícil será sobreescribir ese estilo después. Ver especificidad.

Cómo funciona

Selector de tipo

El selector de tipo (o de elemento) apunta a todos los elementos de un determinado tag HTML. No lleva prefijo — es simplemente el nombre de la etiqueta.

p { color: navy; }       /* todos los <p> */
h1 { font-size: 2rem; }  /* todos los <h1> */
a { color: teal; }       /* todos los <a> */

Es el selector más amplio: aplica a todos los elementos de ese tipo en toda la página, sin importar dónde estén ni qué clases tengan. Útil para establecer estilos base (reset de tipografía, por ejemplo), pero demasiado amplio para estilos específicos.

Selector de clase

El selector de clase apunta a todos los elementos que tienen un determinado valor en su atributo class. Se escribe con un punto (.) delante del nombre de la clase.

.alerta { background-color: yellow; }
.boton-primario { background-color: blue; color: white; }

<p class="alerta">Este párrafo tiene la clase alerta.</p>
<p>Este párrafo no tiene clase.</p>

Es el selector más usado en producción. Una clase se puede reutilizar en múltiples elementos, y un elemento puede tener múltiples clases. El nombre de la clase puede ser cualquier cadena sin espacios (los espacios en el atributo class separan clases distintas).

Selector de ID

El selector de ID apunta al único elemento que tiene ese valor en su atributo id. Se escribe con # delante del nombre.

#encabezado-principal { background-color: #1e293b; }

<header id="encabezado-principal">...</header>

Un id debe ser único en la página — dos elementos con el mismo id es HTML inválido. El selector de ID tiene una especificidad muy alta: es difícil de sobreescribir con otros selectores, lo que crea problemas de mantenibilidad. En CSS moderno, el ID casi nunca se usa como selector de estilo; se reserva para anclas de URL (href="#seccion") y para JavaScript (getElementById). Para estilos, usá clases.

Selector universal

El selector * apunta a todos los elementos del documento sin excepción.

* { box-sizing: border-box; } /* el reset más común */

Aplicarlo sin contexto estiliza absolutamente todo — incluyendo elementos que no necesitan ese estilo. Su uso más legítimo es en resets globales junto con pseudo-elementos: *, *::before, *::after { box-sizing: border-box; }.

Selector de atributo

Apunta a elementos que tienen un determinado atributo, con o sin valor específico.

[href] { color: teal; }            /* cualquier elemento con atributo href */
[type="text"] { border: 1px solid gray; } /* inputs de tipo texto */
[class^="btn-"] { padding: 8px; }  /* clase que comienza con "btn-" */

Es especialmente útil para inputs (seleccionar por type), links (seleccionar por href o target), y cualquier situación donde el atributo HTML sea la característica relevante y no sea práctico agregar clases.

Listas de selectores

Se pueden agrupar múltiples selectores separados por coma para aplicar las mismas declaraciones a todos:

h1, h2, h3 { font-family: serif; }
.error, .alerta { color: red; }

Es un atajo de escritura: equivale a escribir la misma regla tres veces. Importante: si uno de los selectores de la lista es inválido, el navegador descarta toda la regla (no solo el selector inválido). Esto es un gotcha al usar selectores modernos con fallback para browsers viejos.

Combinador descendiente

Un espacio entre dos selectores crea un combinador descendiente: aplica solo a los elementos del segundo selector que estén dentro (a cualquier nivel de profundidad) del primero.

div p { color: gray; }  /* los <p> que estén dentro de un <div>, a cualquier nivel */
nav a { color: white; } /* los <a> dentro de <nav> */

Combinador hijo directo (>)

El combinador > es más estricto que el descendiente: aplica solo a los elementos del segundo selector que sean hijos directos (un solo nivel) del primero.

ul > li { list-style: none; } /* los <li> hijos directos de <ul>, no de ul dentro de ul */

Combinadores adyacente (+) y hermano general (~)

El combinador + selecciona el elemento que viene inmediatamente después del primero. El ~ selecciona todos los hermanos que siguen.

h1 + p { margin-top: 0; }  /* el primer <p> inmediatamente después de <h1> */
h1 ~ p { color: gray; }    /* todos los <p> hermanos que siguen a <h1> */

Gotchas conceptuales

• Evitá el selector de ID para estilos. La especificidad de #id es tan alta que sobreescribirla requiere combinar muchas clases o usar !important. Reservá los IDs para JavaScript y anclas.
• Una clase inválida en una lista rompe toda la regla. h1, h2, :unknown { color: red; } no aplica a h1 ni a h2 en browsers que no soportan :unknown. Cuando necesitás soporte graceful degradation, separá las reglas.
• El selector universal * en selectores de atributo es implícito. [href] y *[href] son equivalentes. El * se puede omitir.
• Los combinadores no crean nueva especificidad por sí mismos. El espacio (descendiente) o > (hijo) no suman especificidad — solo la de los selectores que combinan. div p tiene la misma especificidad que p p (un tipo + un tipo).
• Selectores modernos avanzados (:has(), :is(), :where()). Estos selectores relacionales permiten lógica más expresiva y tienen soporte amplio en browsers modernos (Baseline newly/widely 2023–2024). No están en el temario de este nivel, pero existen como expansión futura.

Vigente / legacy

Todos los selectores mencionados son vigentes y tienen soporte universal. Lo que fue legacy: el hack de selector de atributo de Internet Explorer 6 ([attr] no funcionaba en IE6 — hoy irrelevante). Los selectores de atributo con operadores de cadena (^=, $=, *=) son CSS3 y tienen soporte universal desde hace más de una década.