Selectores básicos: nombrar el elemento

CAT-12 te enseñó la anatomía de la regla CSS usando el selector de tipo: p { color: gray; } pinta todos los <p>. Ahora llega la pregunta natural: ¿y si querés estilizar solo algunos <p>, o este elemento específico? Para eso existen los otros selectores básicos.

CAT-13 cambia una sola cosa de CAT-12: lo que va antes de las llaves. La regla tiene exactamente la misma anatomía — selector, llaves, propiedad, valor. Lo que ampliamos es el vocabulario de selección.

Selector de tipo — todos los de ese tipo

Ya lo conocés: el nombre del elemento tal cual apunta a todos los de ese tipo en la página.

p { color: gray; }   /* TODOS los <p> */
a { color: teal; }   /* TODOS los <a> */

El problema que abre este módulo: muchas veces no querés todos — querés algunos <p>, o este enlace. Para eso están los demás selectores.

Selector de clase (`.nombre`) — la herramienta por defecto

Una clase es una etiqueta que vos le ponés a uno o varios elementos con el atributo class, y la apuntás en CSS con un punto delante del nombre:

<p class="destacado">Café del día</p>
<p>Café común</p>
<p class="destacado">Oferta de la semana</p>

.destacado {
  font-weight: bold;
  color: teal;
}

Puntos finos que deben quedar clarísimos:

Es la herramienta por defecto para estilar. Cuando querés dar estilo a “algunos” elementos (no a todos los de un tipo), ponés una clase.
Reutilizable: la misma clase va en cuantos elementos quieras — los dos <p> de arriba, un <li>, un <h2>, lo que sea.
Un elemento puede tener varias clases, separadas por espacio: class="destacado oferta" recibe el estilo de .destacado y de .oferta.
El selector lleva . + el nombre; el atributo HTML NO lleva punto — class="destacado", nunca class=".destacado". Es el error más frecuente.

Selector de ID (`#nombre`) — con su matiz

Un ID identifica un solo elemento del documento. En HTML se escribe id="..." y en CSS se apunta con almohadilla #:

<header id="cabecera">…</header>

#cabecera { background-color: teal; }

El matiz importante a este nivel:

Único por documento: un mismo valor de id no debe repetirse en la página. Una clase se comparte; un ID es de uno solo.
Para estilar, su uso es limitado. No es reutilizable — si querés el mismo estilo en otro elemento no podés reusar el ID. Además “pesa” mucho en la cascada, lo que hace su estilo difícil de sobrescribir más adelante. Por eso la herramienta por defecto para estilar es la clase; el ID se reserva para casos puntuales.
Titular para recordar (el detalle es CAT-14): ID pesa más que clase, y clase más que tipo.

Los IDs son muy útiles para otros propósitos — como las anclas #seccion que aprendiste en links del Bloque I. El límite es para el estilado general.

Selector universal (`*`) — todos sin excepción

El asterisco selecciona todos los elementos. Su uso más típico es un reset de márgenes o paddings:

* { margin: 0; }   /* todos los elementos */

Es potente, pero rara vez lo que querés en el día a día.
En los ejercicios validados no lo uses: el validador usa internamente un elemento auxiliar oculto que también recibiría cualquier estilo de *. Lo practicás visualmente en el preview, no en la corrección.

El punto va en el CSS, no en el HTML

El error más común de este módulo:

Correcto	Incorrecto
HTML: `class="destacado"`	HTML: `class=".destacado"`
CSS: `.destacado { … }`	CSS: `destacado { … }` (sin punto → apunta a una etiqueta inexistente)

Si escribís destacado {} sin el punto, el navegador lo trata como selector de tipo y busca elementos <destacado> — que no existen. La regla no aplica a nada.

Tu turno: en el HTML agregá la clase destacado a dos <li>, y en la pestaña CSS escribí las tres reglas. Hacé clic en “Comprobar”.