Selectores CSS

Un selector es la primera parte de una regla CSS: decide a qué elementos se aplican los estilos. Dominar los selectores te permite dar estilo a cualquier cosa sin llenar el HTML de clases. Además, son los mismos que se usan en JavaScript con document.querySelector().

Resumen rápido

Símbolo	Significado	Ejemplo
*	Todos los elementos	*
nombre	Etiqueta	p
.	Clase	.aviso
#	Id	#cabecera
(espacio)	Descendiente (dentro, a cualquier profundidad)	nav a
>	Hijo directo	ul > li
,	O: varios selectores	h1, h2
(pegados)	Y: el mismo elemento cumple todo	p.aviso

Los selectores básicos

/* Universal: todos los elementos */
* { box-sizing: border-box; }

/* Por etiqueta: todos los <p> */
p { color: #333; }

/* Por clase: todos los elementos con class="boton" */
.boton { background: orange; }

/* Por id: el elemento con id="cabecera" */
#cabecera { height: 80px; }

• La clase se escribe con punto y se puede repetir en todos los elementos que quieras. Es el selector que más vas a usar.
• El id se escribe con almohadilla y debe ser único en la página. Un elemento solo puede tener un id.
• Un elemento puede tener varias clases separadas por espacios: class="boton boton-grande desactivado".

Agrupar: la coma

Si varios selectores comparten estilos, agrúpalos con comas. La coma significa “o”:

h1, h2, h3 {
  font-family: Georgia, serif;
  color: #1b2d34;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }

Es una buena práctica: primero lo común a todos, después lo específico de cada uno.

Combinar: selectores pegados

Si escribes dos selectores pegados, sin espacio, el elemento debe cumplir los dos a la vez:

p.nota { font-style: italic; }       /* los <p> que tienen la clase nota */
.boton.primario { color: white; }    /* elementos con las dos clases */
a#inicio { font-weight: bold; }      /* el <a> cuyo id es inicio */

.boton.primario y .primario.boton son lo mismo: el orden de las clases no importa.

Relaciones entre elementos

/* Descendiente (espacio): los <a> que estén DENTRO de .menu, a cualquier nivel */
.menu a { color: white; }

/* Hijo directo (>): solo los <li> que son hijos inmediatos de .menu */
.menu > li { display: inline-block; }

/* Hermano adyacente (+): el <p> que va justo después de un <h2> */
h2 + p { font-size: 1.2rem; }

/* Hermanos generales (~): todos los <p> que van después de un <h2>, al mismo nivel */
h2 ~ p { color: #555; }

Mucho cuidado con el espacio: p.aviso y p .aviso son cosas muy distintas.

• p.aviso: párrafos que tienen la clase aviso.
• p .aviso: elementos con clase aviso que están dentro de un párrafo.

Selectores de atributo

Seleccionan elementos según sus atributos:

input[type="email"] { border-color: blue; }   /* valor exacto */
a[href^="https"] { color: green; }            /* empieza por */
a[href$=".pdf"]::after { content: " (PDF)"; } /* termina en */
img[alt~="gato"] { border: 2px solid; }       /* contiene la palabra */
[disabled] { opacity: 0.5; }                  /* tiene el atributo, con cualquier valor */

Pseudoclases: estados y posiciones

Seleccionan elementos en un estado concreto o en una posición. Se escriben con dos puntos:

a:hover { color: red; }                    /* ratón encima */
a:visited { color: purple; }               /* enlace ya visitado */
button:focus-visible { outline: 3px solid blue; } /* seleccionado con el teclado */
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
input:invalid { border-color: red; }       /* no cumple la validación */

li:first-child { font-weight: bold; }      /* primer hijo */
li:last-child { border: none; }            /* último hijo */
tr:nth-child(odd) { background: #f5f5f5; } /* filas impares */
li:nth-child(3) { color: red; }            /* el tercero */
p:not(.nota) { color: #333; }              /* los <p> que NO tienen la clase nota */

Pseudoelementos: partes de un elemento

Se escriben con dos pares de dos puntos y seleccionan una parte de un elemento, o crean contenido que no está en el HTML:

p::first-letter { font-size: 2em; }        /* primera letra */
p::first-line { font-weight: bold; }       /* primera línea */
.requerido::after { content: " *"; color: red; } /* añade contenido al final */
::selection { background: yellow; }        /* el texto que el usuario selecciona */
input::placeholder { color: #999; }

El contenido creado con ::before y ::after es decorativo: los lectores de pantalla no siempre lo leen, así que no pongas ahí información importante.

Ejercicios: ¿qué selecciona cada uno?

Intenta responder antes de mirar la solución:

p a span { }
p, a, span { }
p.aviso { }
p .aviso { }
p, .aviso { }
ul#menu li.activo > a { }

• p a span: los span que están dentro de un a que está dentro de un p.
• p, a, span: todos los párrafos, todos los enlaces y todos los span.
• p.aviso: los párrafos con la clase aviso.
• p .aviso: cualquier elemento con clase aviso que esté dentro de un párrafo.
• p, .aviso: todos los párrafos y todos los elementos con clase aviso.
• ul#menu li.activo > a: los enlaces hijos directos de un li con clase activo, dentro de la lista con id menu.

Buenas prácticas

• Usa clases para casi todo. Son reutilizables y tienen una prioridad moderada.
• Evita los id en CSS: pesan tanto que luego cuesta sobrescribirlos.
• No encadenes selectores demasiado largos (body div.contenido ul li a span): son frágiles, porque cualquier cambio en el HTML los rompe.
• Pon nombres de clase que digan qué es, no cómo se ve: .precio-oferta mejor que .texto-rojo. Si mañana la oferta es verde, el nombre seguirá teniendo sentido.

Qué pasa cuando varias reglas chocan lo verás en la siguiente lección: cascada, especificidad y herencia.