Selectores y Especificidad

Domina cómo aplicar estilos con precisión en CSS usando elementos, clases, ID, pseudoclases, especificidad y herencia. Aprende a evitar estilos repetidos, a inspeccionar el HTML en el navegador y a controlar cambios de estado como el hover con reglas claras y reutilizables.

¿Cómo seleccionar en CSS: elementos, clases e ID?

Trabajar con selectores es la base. Un selector de etiqueta aplica estilos a todas las etiquetas del mismo tipo. Las clases son reutilizables en múltiples elementos. Los ID son únicos y deben usarse para casos puntuales, especialmente cuando más adelante se interactúe con JavaScript.

• Usa el inspector del navegador: clic derecho y abrir inspector para ver HTML y estilos aplicados.
• Selector de etiqueta: afecta todas las etiquetas del mismo nombre.
• Selector de clase: se invoca con punto y puede repetirse en varios elementos.
• Selector de ID: se invoca con numeral y solo debe existir una vez.
• Evita estilos en línea como práctica habitual: tienen demasiado peso y complican el mantenimiento.

Ejemplos.

/* Selector de etiqueta: se replica en todos los 
 */
p {
  margin-bottom: 30px;
}

/* Clase reutilizable */
.rojo {
  color: red;
}

/* ID único */
#unico {
  background: yellow;
}

¿Cómo ser más específico: selectores descendientes y contenedores?

Cuando no conviene crear más clases, los selectores descendientes permiten aplicar estilos solo a elementos dentro de un contenedor con clase. Esto evita “pisarse” entre estilos y mejora el control.

• Contenedor con clase: agrupa elementos relacionados.
• Selector descendiente: se escribe con un espacio entre el contenedor y el elemento objetivo.
• Solo afecta a los hijos dentro del contenedor indicado.

Ejemplos.

/* Estilo del contenedor */
.contenedor {
  border: 2px solid blue;
}

/* Solo 
 dentro de .contenedor */
.contenedor p {
  color: blue;
}

¿Cómo usar pseudoclases y manejar especificidad y herencia?

Las pseudoclases cambian estilos según el estado de un elemento. Útiles para indicar interacción visual como el hover en enlaces y botones. Además, conocer la especificidad y la herencia evita conflictos al crecer el proyecto.

¿Qué hacen las pseudoclases hover, link y visits?

• hover: aplica estilos cuando el puntero pasa encima.
• link: aplica a enlaces no visitados.
• visits: aplica a enlaces ya visitados.

Ejemplos.

/* Estado de interacción en botón */
button:hover {
  background: lightblue;
  cursor: pointer;
}

/* Enlace no visitado */
a:link {
  color: green;
}

/* Enlace visitado */
a:visits {
  color: yellow;
}

¿Cómo funciona la especificidad en CSS?

Piensa la especificidad como un sistema de puntos que define qué regla gana.

• Elementos/etiquetas: 1 punto.
• Clases: 10 puntos.
• ID: 100 puntos.
• Estilos inline: 1000 puntos.
• importance: sobreescribe casi cualquier regla.

Claves prácticas.

• Los ID reescriben clases y etiquetas.
• Los estilos inline y importance deben usarse con cuidado.
• A mayor especificidad, más control, pero también más riesgo de conflictos.

¿Qué se hereda y qué no en CSS?

La herencia transmite estilos desde el contenedor padre a sus hijos cuando aplica a propiedades de texto.

• Se heredan: color, familia tipográfica, tamaño de fuente, alineación de texto y estilos de fuente.
• No se heredan: margin, padding, border, background, width, height, position.

Ejemplo de herencia.

/* El color se hereda a los hijos, como 
 dentro de .contenedor */
.contenedor {
  color: blue;
}

¿Tienes dudas o un caso específico con selectores, pseudoclases o especificidad? Comenta y cuéntame qué estás intentando lograr.