Aprender a usar selectores CSS correctamente marca la diferencia entre un proyecto que crece sin problemas y uno donde los estilos se pisan entre sí. Si estás dando tus primeros pasos con hojas de estilo, dominar clases, IDs, pseudoclases y la regla de especificidad te va a ahorrar horas de debugging.

Vamos a recorrer cada tipo de selector con ejemplos reales, entendiendo cuándo conviene usar uno u otro y cómo el navegador decide qué estilo aplicar cuando hay reglas que compiten entre sí.

¿Qué son los selectores en CSS y cómo funcionan?

Un selector es la forma en que le decimos a CSS qué elemento del HTML queremos modificar. La más básica es seleccionar directamente la etiqueta: si escribes p y le aplicas margin-bottom: 30px;, todos los párrafos del documento van a tener ese margen [00:46].

Esto se confirma abriendo el inspector de elementos del navegador con clic derecho. En la consola puedes ver el HTML y, debajo, los estilos aplicados a cada selector. Es la mejor herramienta para entender qué está pasando con tu CSS.

El problema con los selectores de etiqueta es que son demasiado genéricos. Si solo quieres estilizar un párrafo específico sin afectar al resto, necesitas algo más preciso.

¿Cuál es la diferencia entre una clase y un ID en CSS?

Las clases y los IDs son los dos selectores más usados para aplicar estilos de forma selectiva [03:00]. Su sintaxis en HTML es sencilla: class="nombre" o id="nombre".

¿Cuándo usar clase y cuándo usar ID? Usa clase cuando varios elementos compartan el mismo estilo, porque las clases son reutilizables. Usa ID solo para un elemento único, ya que no puede repetirse en el documento.

En CSS, las clases se invocan con un punto antes del nombre, por ejemplo .rojo { color: red; }. Los IDs se llaman con numeral, como #unico { background-color: yellow; }. La regla del ID único no es solo una convención de estilo, es crítica cuando trabajes con JavaScript, porque ese lenguaje busca IDs para aplicar funcionalidad y duplicarlos rompe el comportamiento esperado [04:30].

¿Qué son los selectores descendientes?

A veces necesitas estilizar elementos dentro de un contenedor sin crear una clase nueva. Para eso existen los selectores descendientes [09:00]. Si tienes un div con clase contenedor y quieres que solo los párrafos dentro de él sean azules, escribes:

css .contenedor p { color: blue; }

La regla se traduce así: aplica estos estilos a todas las etiquetas p que estén dentro de cualquier elemento con la clase contenedor. Los párrafos fuera de ese contenedor no se verán afectados.

¿Qué son las pseudoclases y cómo se usan?

Las pseudoclases permiten aplicar estilos según el estado de un elemento. Se escriben con dos puntos después del selector y son ideales para interacciones [11:30].

El ejemplo más común es :hover, que se activa cuando pasas el cursor por encima:

css button:hover { background-color: lightblue; cursor: pointer; }

Eso cambia el fondo del botón y muestra la manita que indica que es interactivo. En enlaces, las pseudoclases más útiles son:

• :link aplica estilos a enlaces que aún no han sido visitados.
• :visited aplica estilos a enlaces que el usuario ya abrió.
• :hover aplica estilos cuando el cursor pasa encima.

Para probar :link correctamente conviene abrir el proyecto en una ventana de incógnito, porque el navegador recuerda los enlaces visitados y puede confundirte [13:30].

¿Cómo funciona la especificidad en CSS?

Cuando varias reglas compiten por el mismo elemento, CSS decide cuál gana usando un sistema de puntos llamado especificidad [16:00]. Cada tipo de selector tiene un peso distinto:

• Elemento (etiqueta): 1 punto.
• Clase: 10 puntos.
• ID: 100 puntos.
• Estilo inline (en la etiqueta HTML): 1.000 puntos.
• Declaración con !important: sobrescribe casi todo.

¿Qué es !important en CSS? Es una declaración que fuerza a un estilo a sobrescribir cualquier otra regla, sin importar la especificidad. Úsalo con precaución porque rompe la cascada natural y complica el mantenimiento del proyecto.

Entender esta jerarquía explica por qué los estilos inline causan problemas en proyectos grandes: tienen tanto peso que pisan reglas escritas en tu hoja de estilos. La recomendación es trabajar con clases siempre que sea posible y reservar los IDs para casos puntuales.

¿Qué propiedades se heredan en CSS?

CSS funciona como una cascada y muchos estilos se heredan de los contenedores padre a sus hijos [19:00]. Si aplicas color: blue a un div, los párrafos dentro de él heredarán ese color sin necesidad de declararlo.

Las propiedades que sí se heredan están relacionadas con tipografía:

• color del texto.
• familia tipográfica (font-family).
• tamaño de fuente (font-size).
• alineación del texto (text-align).

Las propiedades que no se heredan y debes declarar de forma independiente en cada elemento son: margin, padding, border, background, width, height y position.

Saber qué se hereda y qué no te permite escribir CSS más limpio, declarando estilos tipográficos en contenedores padre y aplicando layout solo donde realmente lo necesitas. ¿Te gustaría que revisemos cómo combinar estos selectores en un proyecto real? Cuéntame en los comentarios qué duda tienes sobre especificidad o herencia.