ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Dibujando con CSS ¡Dibujos hechos con sólo CSS!
Experimentos con Javascript ¡Experimentos con Javascript!

Cascada en CSS

Uno de los conceptos principales más importantes de CSS es el concepto denominado cascada. De hecho, la cascada es la que le da sentido a la C inicial en el nombre de CSS.

En algunos casos, el concepto de cascada es demasiado avanzado como para verlo en un tema de introducción, por lo que se debe conocer bien el tema de selectores CSS y dominar algo de propiedades CSS para comprenderlo totalmente. Si no es el caso, se aconseja que se posponga para una lectura posterior.

Supongamos que nos encontramos ante el siguiente escenario, donde aplicamos unos estilos CSS a exactamente el mismo selector (div) y donde coincide la propiedad CSS color con diferente valor en cada bloque:

<div>Texto del elemento</div>

<style>
div {
  color: red;
  padding: 8px
}

div {
  color: blue;
  background-color: grey
}
</style>

En este caso, ¿cuál de las dos reglas prevalece, si tenemos en cuenta que se refieren al mismo elemento y están al mismo nivel? La respuesta es muy fácil: Prevalece siempre la última regla definida, la cuál mezcla y sobreescribe las propiedades anteriores.

En el caso anterior, el resultado final (valor computado) sería el siguiente:

div {
  color: blue; /* Se sobreescribe la última */
  padding: 8px;
  background-color: grey;
}

Sin embargo, puede ocurrir que en determinados casos no esté tan claro cuál es el estilo que debería sobreescribir a los anteriores. Ahí es cuando entra en juego el concepto de cascada en CSS, que es el que se encarga de eliminar la ambigüedad y determinar el que tiene prioridad.

Supongamos el siguiente caso, donde tenemos un mismo elemento <div> con un id y una clase:

<div id="nombre" class="clase">Texto del elemento</div>

<style>
div { color: red; }
#nombre { color: blue; }
.clase { color: green; }
</style>

Tenemos un elemento HTML <div id="nombre" class="clase"> que encaja con los tres bloques del ejemplo anterior. ¿Cómo sabe CSS que estilo aplicar? ¿Cuál tiene prioridad sobre los demás? Aquí es donde entra en acción el concepto de cascada en CSS.

Cascada CSS

El navegador, para saber que bloque de estilos tiene prioridad sobre los demás, analiza (por orden) tres conceptos clave del código CSS: su importancia, su especificidad y su orden. Veamos en que se basa cada uno de ellos.

Importancia

La importancia de un código CSS se determina dependiendo de las hojas de estilo donde está colocado. Generalmente, no necesitaremos preocuparnos de este factor, pero siempre es una buena idea conocer como funciona. Existen varios tipos de hojas de estilo, de menor a mayor importancia:

Tipo de CSS Descripción Definido por
Agente de usuario Son los estilos CSS que aplica el navegador por defecto. Navegador
CSS de usuario Son los estilos CSS que añade el usuario, por razones de personalización. Usuario
CSS de autor Son los estilos CSS que coloca el autor de la página. Desarrollador

Aunque no es recomendable utilizarlo frecuentemente (puede convertirse en una mala práctica), se puede añadir al final de cada regla el texto !important, consiguiendo que la regla en cuestión tenga prioridad sobre las demás, independientemente del nivel o la altura a la que estén:

<div>Texto del elemento</div>

<style>
div {
  color: red !important;
  padding: 8px
}

div {
  color: blue;
  background-color: grey
}
</style>

El resultado final de este código CSS sería:

div {
  color: red;
  padding: 8px;
  background-color: grey
}

Nota: En el caso de que una misma propiedad del CSS de usuario y una propiedad del CSS de autor tuvieran !important, como caso excepcional tendría prioridad la del CSS de usuario sobre la del CSS de autor.

Especificidad

En segundo caso, y si la importancia no elimina la ambigüedad, se pasa a determinar la especificidad de los selectores CSS, que es uno de los criterios más importantes de la cascada de CSS (y también más desconocido).

Para determinar la especificidad de un selector, se sigue un cálculo matemático basado en 4 componentes: A, B, C, D:

Componente Descripción
Componente A Estilos aplicados mediante un atributo style.
Componente B Número de veces que aparece un id en el selector.
Componente C Número de veces que aparece una clase , pseudoclase o atributo en el selector.
Componente D Número de veces que aparece un elemento o un pseudoelementos en el selector.

Para saber si un bloque de CSS es más específico que otro (y por lo tanto, tiene mayor prioridad) sólo hay que calcular sus componentes. Se ordenan teniendo en cuenta los valores de cada componente, de izquierda a derecha. Veamos algunos ejemplos:

div { ... }                       /* Especificidad: 0,0,0,1 */
div div { ... }                   /* Especificidad: 0,0,0,2 */
#pagina div { ... }               /* Especificidad: 0,1,0,1 */
#pagina div:hover { ... }         /* Especificidad: 0,1,1,1 */
#pagina div:hover a { ... }       /* Especificidad: 0,1,1,2 */
#pagina .sel:hover>a { ... }      /* Especificidad: 0,1,2,1 */

En keegan.st tienes una excelente calculadora de especificidad CSS donde podrás calcular la especificidad de un selector CSS rápida y cómodamente.

Orden

En CSS, es posible crear múltiples reglas CSS para definir un mismo concepto. En este caso, la que prevalece ante todas las demás depende de ciertos factores, como es la «altura» a la que está colocada la regla:

  • El CSS en linea en un elemento HTML es el que tiene mayor precedencia, por lo que siempre será el que tenga prioridad sobre otras reglas CSS. Recuerda que son los estilos incluidos en una etiqueta HTML a través del atributo style.

  • En segundo lugar, el CSS interno definido a través de bloques <style> en el propio documento HTML será el siguiente a tener en cuenta en orden de prioridad.

  • Por último, los documentos CSS externos son la tercera opción de prioridad a la hora de tomar en cuenta las reglas CSS. Son aquellos que se relacionan en un documento HTML a través de la etiqueta <link>.

Teniendo esto en cuenta, hay que recordar que las propiedades que prevalecerán serán las que estén en último lugar, siempre respetando la prioridad de la lista anterior.

Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.