- ¿Qué es la cascada en CSS?
- Orden de prioridad en CSS
- Prioridad de los selectores en CSS
- Cuando CSS anula propiedades
- Especificidad en CSS: ¿qué selector gana?
Al diseñar una página web con CSS, es común que algunos estilos no se apliquen como esperábamos. Esto ocurre debido al sistema de cascada, el mecanismo que CSS utiliza para determinar qué reglas prevalecen cuando varias entran en conflicto.
Comprender la cascada te ayudará a escribir estilos más predecibles y evitar problemas al diseñar tu sitio web.
¿Qué es la cascada en CSS?
🌊 Imagina que CSS funciona como una cascada de agua: los estilos fluyen desde arriba hacia abajo en el código.
Ejemplo básico de la cascada:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Aquí, el texto tendrá:
- Tamaño de 24px (por el selector
p). - Negrita (por la clase
.text-bold). - Color oscuro (por la clase
.text-dark).
Como CSS sigue un flujo en cascada, todos estos estilos se aplican al elemento <p>. Pero, ¿qué pasa cuando hay reglas que entran en conflicto?
Orden de prioridad en CSS
- Especificidad: Las reglas más específicas tienen mayor prioridad.
- Orden en el código: Si dos reglas tienen la misma especificidad, se aplica la última definida en el archivo CSS.
-
Importancia: Las reglas con
!importantsobrescriben las demás, aunque no siempre es recomendable abusar de ellas.
Prioridad de los selectores en CSS
Cuando varios selectores afectan a la misma propiedad (por ejemplo, el color de un texto), CSS usa la prioridades para decidir cuál se aplica. Se calcula con base en el tipo de selector utilizado: ID, clases o etiquetas.
p { color: green; } /* Baja prioridad */
.red { color: red; } /* Prioridad media */
#blue { color: blue; } /* Prioridad más alta */
Ejemplo de prioridad:
<p id="blue" class="red">¿De qué color será este texto?</p>
Si analizamos la prioridad:
- Selector por identificador (
#blue) → Tiene la prioridad más alta. - Selector por clase (
.red) → Prioridad media. - Selector por etiqueta (
p) → Prioridad baja.
🤔 ¿De qué color será el texto?
🔵 El texto será azul, porque el id tiene más prioridad que la clase o la etiqueta p.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
id para definir estilos. Es mejor usar clases, porque permiten mayor flexibilidad.
Cuando CSS anula propiedades
Si un mismo elemento tiene varias clases con estilos contradictorios, CSS elegirá la última regla en el código.
Ejemplo:
.alert { color: gray; }
.alert-error { color: red; } /* Está después, así que gana */
<p class="alert alert-error">Alerta en rojo</p>
🤔 ¿De qué color será el texto?
🔴 Rojo, porque .alert-error aparece después de .alert en el CSS.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Especificidad en CSS: ¿qué selector gana?
Cuando hay múltiples selectores aplicados a un mismo elemento, CSS usa un sistema de "puntos" llamado especificidad para decidir cuál gana.
📈 Tabla de especificidad
| Selector | Puntuación |
|---|---|
#id |
100 |
.clase |
10 |
elemento |
1 |
.form-input { height: 50px; } /* 10 puntos */
textarea { height: 200px; } /* 1 punto */
<textarea class="form-input"></textarea>
🤔 ¿Qué altura tendrá textarea?
50px, porque .form-input (10 puntos) gana a textarea(1 punto).
Resumen
- CSS sigue una cascada, combinando estilos en orden.
- Los IDs (
#id) tienen más prioridad que las clases (.clase) o las etiquetas (elemento). - Si hay conflicto entre reglas, gana la última en el código.
- La especificidad decide qué regla se aplica cuando hay conflicto.
