La cascada CSS, junto a la herencia, son dos de las características más importantes de CSS (y más frustrantes si no se sabe como funcionan).

Además de la herencia, otro de los conceptos más importantes de CSS es el concepto de cascada. Este concepto es un poco más avanzado, por lo que se debe conocer bien el tema de selectores CSS y dominar algo de CSS para comprenderlo en su totalidad, por lo que si no es el caso se puede posponer para una lectura posterior.

Antes de continuar, supongamos que nos encontramos ante el siguiente escenario:

div {
    color:red;
    padding:8px
}

div {
    color:blue;
    background-color:grey
}

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 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:

div {
    color:red;
}

#nombre {
    color:blue;
}

.clase {
    color:green;
}

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.

Para saber que bloque de estilos tiene prioridad, CSS analiza (por orden) tres conceptos clave del código CSS: su importancia, la 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 hojas de estilo Descripción
Agente de usuario Son los estilos CSS que aplica el navegador por defecto.
CSS de usuario Son los estilos CSS que añade el usuario, por razones específicas.
CSS de autor Son los estilos CSS que coloca el autor de la página.

Aunque no es recomendable utilizarlo frecuentemente (puede convertirse en una mala costumbre), 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 {
    color:red!important;
    padding:8px
}

div {
    color:blue;
    background-color:grey
}

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. Para ello, se sigue un cálculo matemático basado en 4 componentes: A,B,C,D.

Componente Descripción
Componente A Número de 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 prioridad) sólo hay que calcular sus componentes. Veamos algunos ejemplos con selectores CSS reales:

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:

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 freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).