Selectores CSS y Especificidad: Guía Visual para Dominar el Estilo en HTML

Introducción
¿Te has preguntado alguna vez por qué ciertos estilos CSS se aplican y otros no? ¿O por qué algunos elementos heredan propiedades y otros no? En este artículo desglosamos de forma clara y visual cómo funcionan los selectores en CSS, la jerarquía de herencia, la especificidad y mucho más. Todo esto a través de ejemplos reales en HTML y CSS que puedes probar tú mismo. Si estás aprendiendo diseño web o quieres mejorar tu dominio del CSS, este contenido es para ti.

Estructura Básica de un Documento HTML con Estilos
Comenzamos creando un archivo selectores.html con una estructura básica: un header que contiene un h1 como título y un párrafo. Al abrirlo con Live Server, observamos que no hay estilos aplicados aún.

Se genera entonces un nuevo archivo selectores.css, se traslada correctamente a la carpeta /css, y se vincula al HTML mediante la etiqueta <link>. Es crucial comenzar con un selector universal usando un asterisco (*) para resetear márgenes y rellenos:

* {
  margin: 0;
  padding: 0;
}

Creación de Secciones y Jerarquía HTML
Se añade una sección <section id="main"> que contiene un div con un h2 y varios párrafos. Este esquema permite jugar con la jerarquía de elementos y cómo CSS los selecciona y estiliza.

Para duplicar elementos fácilmente en Visual Studio Code, se utiliza la combinación de teclas Shift + Alt + ↓.

Selectores Compuestos y Jerárquicos en CSS
Aquí es donde empieza lo interesante:

• h1, h2 { color: red; }: Aplica el mismo estilo a ambos elementos.
• header p { color: blue; }: Estiliza todos los p dentro de header, sin importar cuán anidados estén.
• header > p { color: blue; }: Solo aplica a los p que sean hijos directos de header.

Esto permite entender la importancia del espacio ( ) y el símbolo de hijo directo (>) en la especificidad del CSS.

Selectores Descendientes y Hijos Directos
Si tenemos esta estructura:

<section id="main">
  <div>
    <p>Texto aquí</p>
  </div>
</section>

La regla #main > p no se aplicará, ya que p no es hijo directo de #main. Sin embargo, con #main div p sí se aplicará, ya que selecciona cualquier p dentro de un div dentro de #main.

Herencia en CSS: Qué Se Hereda y Qué No
Propiedades como color se heredan en elementos como p, h1, etc., pero no en elementos como input. Para forzar la herencia, se puede usar:

input {
  color: inherit;
}

Esto permite mantener la coherencia visual en formularios y otros elementos por defecto no heredables.

IDs vs. Clases: Especificidad en Acción
CSS tiene una jerarquía clara:

• Los selectores por ID (#main) tienen más peso que los de clase (.articulo) o etiqueta (p).
• Si varias reglas se aplican a un mismo elemento, gana la más específica.
• Si la especificidad es igual, gana la que aparece más abajo en el CSS.

Selectores de Atributo en Formularios
Podemos aplicar estilos solo a inputs específicos:

input[type="text"] {
  color: red;
}

Esto estiliza únicamente los campos de texto, sin afectar a los de tipo number.

Seudoclases: Interactividad y Estilo Dinámico
Una de las más usadas es :hover, que aplica estilos cuando el usuario pasa el ratón por encima:

span:hover {
  background-color: #f0f0f0;
  color: #333;
  cursor: pointer;
}

Además, con herramientas como el inspector de elementos del navegador, puedes activar manualmente el estado :hover para hacer ajustes visuales sin necesidad de interactuar con el ratón.

Conclusión
Entender cómo funcionan los selectores CSS, la herencia, la especificidad y las seudoclases es fundamental para dominar el diseño web. Practica lo visto en este artículo, juega con tus propios archivos y explora el inspector del navegador para detectar por qué una regla se aplica… o no.

¿Te ha sido útil esta guía? ¡Entonces no olvides darle «me gusta», dejar tu comentario y suscribirte al canal para más contenido como este! ¡Nos vemos en el próximo vídeo!