La cascada y el orden de aparición
Cuando aprendiste los selectores en CAT-13, quedó una pregunta abierta: si <p class="oferta"> puede ser alcanzado por p { color: gray } y por .oferta { color: teal } al mismo tiempo, ¿cuál gana?
La respuesta la da la cascada — el algoritmo que usa el navegador para resolver conflictos entre reglas CSS.
¿Qué es la cascada?
La cascada es el mecanismo que decide, cuando varias reglas compiten por el mismo elemento con la misma propiedad, qué valor usar. El nombre viene de que las reglas “caen” desde distintos orígenes y niveles de importancia.
El navegador aplica tres factores en orden, de mayor a menor prioridad:
Factor 1 — Origen e importancia
Tu CSS (el del autor) gana sobre los estilos por defecto del navegador. Esto funciona: si el navegador pone h1 { font-size: 2em; } y vos escribís h1 { font-size: 1em; }, tu regla gana.
!important es la excepción que rompe este orden — se cubre en la lección siguiente.
Factor 2 — Especificidad
Si dos reglas tienen el mismo origen, gana la más específica: la que apunta al elemento de forma más precisa. .oferta es más precisa que p; #id es más preciso que .clase. El cálculo completo es el tema de L-2.
Factor 3 — Orden de aparición
Si dos reglas tienen el mismo origen y la misma especificidad, la que viene después en el código gana.
/* mismo selector = misma especificidad → la última gana */
h2 { color: gray; }
h2 { color: teal; } /* esta gana: viene después */El orden importa solo cuando la especificidad empata
Este detalle es clave: el orden de aparición entra en juego únicamente cuando el peso de los selectores es igual.
p { color: gray; } /* tipo: 0-0-1 */
.oferta { color: teal; } /* clase: 0-1-0 → GANA, sin importar el orden */Acá .oferta gana sobre p aunque p esté primero — tiene mayor especificidad. El orden no cambia nada.
p { color: gray; } /* misma especificidad: 0-0-1 */
p { color: teal; } /* esta gana porque viene después */Acá sí gana el orden: ambas reglas tienen exactamente el mismo peso.
Reglas que no “se suman”
Un error común: creer que dos reglas sobre el mismo elemento “se combinan”. No es así. Cuando compiten por la misma propiedad, la ganadora reemplaza a la otra.
h2 { color: gray; }
h2 { color: teal; }
/* El h2 tiene color: teal — la segunda reemplaza a la primera en esa propiedad */Lo que sí se acumula son propiedades distintas:
h2 { color: teal; }
h2 { font-weight: bold; }
/* El h2 tiene color: teal Y font-weight: bold — propiedades distintas, no conflicto */El orden también aplica entre hojas de estilos
Si vinculás dos archivos CSS externos, <link> con estilos.css y luego con temas.css, y ambas tienen h1 { color: ... } con igual especificidad, gana la regla de temas.css — la que se cargó después.
/* estilos.css (se carga primero) */
h1 { color: gray; }
/* temas.css (se carga después) */
h1 { color: teal; } /* esta gana */Tu turno: las reglas del “primer autor” ya están escritas. Agregá tus reglas debajo para que el h2 quede en teal y los <p> en bold. Hacé clic en “Comprobar”.
El orden de aparición decide
El HTML del sandbox tiene los titulares y textos de Café Aroma. Hay reglas CSS que ya escribí en el starter — **no las borres**; son el "primer autor" del documento. La cascada dice: cuando dos reglas con el mismo selector compiten, **la que viene DESPUÉS gana** (mismo origen, misma especificidad → desempate por orden). 1. Hacé que el `<h2>` se vea en `teal` agregando una regla `h2 { color: teal; }` **DEBAJO** de la que ya existe (`h2 { color: gray; }`). Fijate: el orden importa. 2. Hacé que los `<p>` tengan `font-weight: bold` agregando la regla correspondiente al final. > Bonus (no validado, solo para observar): probá mover tu regla de `h2` ARRIBA de la existente. ¿Qué pasa con el color? ¿Por qué?
Preview