Ya conoces el selector de etiqueta. Escribes h2 y CSS aplica el estilo a todos los <h2> de tu página. Poderoso... pero a veces demasiado. ¿Qué pasa si tienes cinco párrafos y solo quieres que uno tenga fondo azul? ¿O si quieres reutilizar el mismo estilo en elementos completamente distintos?
Para eso existen otros tipos de selectores. Son como diferentes niveles de precisión: desde un mazo hasta un bisturí.
El selector por ID te permite apuntar a un elemento único. ¿Recuerdas el atributo id de HTML? Es el identificador único de un elemento — no pueden existir dos elementos con el mismo id en la misma página.
En CSS, seleccionas un elemento por su id usando el símbolo #:
Solo el segundo <h2> tendrá fondo azul. El primero queda intacto.
Pero aquí está el problema: como no pueden repetirse los id, si quisieras dar fondo azul a otro elemento tendrías que inventar un nuevo id y escribir una regla nueva casi idéntica. Eso es código repetido — y los buenos programadores odian repetirse.
Las clases resuelven exactamente ese problema. Sirven para agrupar y reutilizar estilos entre múltiples elementos, incluso si son etiquetas diferentes.
En CSS, las clases se seleccionan con un punto .:
Todos los elementos con la clase mis-elementos tendrán fondo azul — sin importar si son <h2>, <h3> o <p>. Una sola regla, múltiples elementos. Eso es la reutilización en acción.
Existe un selector que va más allá de todos: el selector universal *. Aplica estilos a absolutamente todos los elementos de tu página.
Pruébalo y verás cómo todo se vuelve rojo. Es como echarle pintura a todo el edificio de una vez. Útil en algunos casos específicos, pero con mucho poder viene mucha responsabilidad.
Escribe un título principal y un párrafo en el HTML. Dale a ambos el nombre de clase con-fondo y en el CSS escribe una regla que le dé un fondo de color verde a dicha clase.
Cuanto más preciso apuntas, más control tienes...