Especificidad y !important

La lección anterior mostró el tercer factor de la cascada: el orden de aparición. Pero el orden solo desempata cuando el peso de los selectores es igual. Ese peso se llama especificidad.

---

La jerarquía de especificidad

Cada selector tiene un peso. El navegador los compara para decidir quién gana. De mayor a menor:

1. Inline — el atributo style="..." en el HTML, directo al elemento
2. ID — #nombre — único en la página, muy específico
3. Clase, pseudo-clase, atributo — .nombre, :hover, [href]
4. Tipo, pseudo-elemento — p, h1, ::before — la base, el menos específico

p               { color: gray; }   /* tipo:   peso bajo */
.oferta         { color: teal; }   /* clase:  peso medio → gana sobre p */
#encabezado     { color: green; }  /* ID:     peso alto → gana sobre .oferta */
/* inline style="color:red" → gana sobre todo (salvo !important) */

---

El sistema de tres columnas (A-B-C)

Para calcular el peso de un selector más complejo, se usan tres columnas:

• Columna A — cuántos #id tiene el selector
• Columna B — cuántas .clase, :pseudo-clase o [atributo] tiene
• Columna C — cuántos tipo o ::pseudo-elemento tiene

p                   → 0-0-1
.oferta             → 0-1-0
#encabezado         → 1-0-0
.oferta p           → 0-1-1  (clase + tipo)
#encabezado .oferta → 1-1-0  (ID + clase)

La comparación va de izquierda a derecha: 1-0-0 gana sobre 0-99-0. No importa cuántas clases acumulés — nunca alcanzan un ID.

---

Qué NO suma especificidad

• El selector universal * → suma 0 (0-0-0). No cambia el peso.
• Los combinadores (espacio , >, +, ~) → suman 0. Solo los selectores a cada lado suman.
• Las pseudo-clases estructurales (:first-child, :nth-child()) → suman 0-1-0 (cuentan como clase).
• Los pseudo-elementos (::before) → suman 0-0-1 (cuentan como tipo).

section p        { color: gray; }   /* 0-0-2 — el espacio no suma */
section > p      { color: teal; }   /* 0-0-2 — el > tampoco suma */
li:first-child   { color: teal; }   /* 0-1-1 — pseudo-clase = columna B */

---

!important — la excepción que rompe la cascada

!important es una marca que se pone al final de una declaración:

p { color: red !important; }

Qué hace: saca esa declaración del flujo normal y la coloca en una categoría de mayor prioridad. Una declaración !important gana sobre cualquier declaración normal, sin importar la especificidad.

#titulo { color: green; }          /* ID: 1-0-0 — normalmente gana */
p       { color: red !important; } /* tipo + !important — le gana al ID */

Si <p id="titulo"> recibe las dos reglas, el computed es red.

---

Por qué evitar !important

Tres razones concretas:

1. Rompe la cascada natural. La especificidad y el orden permiten predecir quién gana. Con !important hay que rastrear todas las reglas marcadas antes de entender el resultado.
2. Solo se vence con otro !important más específico. Si ganás con !important, quien quiera sobrescribirte también tendrá que usarlo. Escalada garantizada.
3. Vuelve el CSS difícil de mantener. En proyectos grandes, un !important en la base obliga a !important en los componentes, que obliga a !important en los overrides.

El diagnóstico correcto: casi siempre que un principiante quiere usar !important es porque no sabe qué selector lo está pisando. La solución es encontrar ese selector y subir la especificidad propia, no usar !important como atajo.

Cuándo es aceptable (excepción, no regla): sobrescribir CSS de librerías externas que no podés modificar, o clases de utilidad que deben aplicarse siempre (como clases de accesibilidad .sr-only).

---

Límite del motor: el corrector verifica el efecto de !important (que el computed sea el valor forzado), pero no puede leer la keyword !important como texto del CSS. Si llegás al mismo computed por otra vía (ej. un selector más específico), el check también pasa — pedagógicamente es aceptable.

---

Tu turno: las reglas del starter ya están. Agregá las tuyas para que el <p> sin clase sea rojo, el .oferta siga en teal, y el <h2> sea rojo a pesar de la regla azul posterior. Hacé clic en “Comprobar”.