Prioridad CSS

Cuando varias declaraciones CSS afectan a una misma propiedad de un elemento HTML, el navegador debe determinar cuál de ellas se aplica.

Por ejemplo:

p {
  color: red;
}

.destacado {
  color: blue;
}

Si un párrafo tiene la clase destacado, ambas reglas intentan establecer su color. Sin embargo, solo una de las declaraciones determinará el valor final de color.

El navegador resuelve estos conflictos mediante un procedimiento denominado cascada CSS (CSS Cascade).

Para comprender su funcionamiento estudiaremos cuatro aspectos:

1. El origen de los estilos y el modificador !important.
2. Los estilos en línea, internos y externos.
3. La especificidad de los selectores.
4. El orden de aparición de las declaraciones.

1. La cascada CSS

La cascada es el mecanismo que utiliza el navegador para determinar qué declaración CSS debe aplicarse cuando varias declaraciones compiten por establecer una misma propiedad.

En términos generales, intervienen los siguientes criterios:

1. Origen e importancia: De dónde procede la declaración y si utiliza !important.
2. Especificidad: Qué selector tiene mayor especificidad.
3. Orden de aparición: Qué declaración aparece después cuando los criterios anteriores no resuelven el conflicto.

La cascada es más que la especificidad

La especificidad es uno de los mecanismos utilizados por la cascada, pero no es el único.

Un selector más específico no siempre gana: por ejemplo, una declaración con !important puede imponerse a otra declaración normal con mayor especificidad.

La especificación CSS contempla otros criterios, como las capas de cascada (@layer), las animaciones y las transiciones. En este apartado nos centraremos en los casos más habituales.

2. El modificador !important

El modificador !important permite declarar que una propiedad tiene una importancia especial dentro de la cascada.

Se escribe al final del valor de una declaración, antes del punto y coma.

p {
  color: red !important;
}

p {
  color: blue;
}

En este ejemplo, el párrafo aparecerá en rojo, aunque la declaración azul se encuentre después.

Esto sucede porque una declaración importante tiene prioridad sobre una declaración normal del mismo origen.

Conflictos entre declaraciones importantes

Si dos declaraciones utilizan !important, la especificidad puede determinar cuál se aplica.

p {
  color: red !important;
}

.destacado {
  color: blue !important;
}

<p class="destacado">Texto de ejemplo</p>

El texto aparecerá en azul, porque el selector de clase .destacado tiene mayor especificidad que el selector de tipo p.

Uso de !important

Aunque !important puede resultar útil en determinadas situaciones, no se recomienda utilizarlo habitualmente para resolver conflictos entre reglas CSS.

Su uso excesivo dificulta el mantenimiento de las hojas de estilo y puede provocar que sea necesario añadir nuevas declaraciones importantes para sobrescribir las anteriores.

Es preferible organizar correctamente los selectores y aprovechar el funcionamiento normal de la cascada.

Además, !important no garantiza una prioridad absoluta: las declaraciones importantes de otros orígenes, como determinados estilos del usuario o del navegador, pueden prevalecer sobre las del autor de la página.

3. Estilos en línea, internos y externos

Como hemos estudiado anteriormente, existen tres formas habituales de aplicar CSS a un documento HTML:

• CSS en línea (inline): Mediante el atributo style de un elemento HTML.
• CSS interno: Mediante el elemento <style> del documento.
• CSS externo: Mediante un archivo .css enlazado con <link>.

Estas formas de incorporar CSS no tienen todas el mismo comportamiento respecto a la prioridad.

3.1. Estilos en línea

Los estilos en línea tienen prioridad sobre las declaraciones normales de las hojas de estilo del autor, independientemente de la especificidad de sus selectores.

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

<body>
  <p style="color: blue;">Texto de ejemplo</p>
</body>

El párrafo aparecerá en azul, porque el estilo en línea prevalece sobre la declaración normal del elemento <style>.

Sin embargo, una declaración !important de la hoja de estilo puede prevalecer sobre un estilo en línea normal.

<head>
  <style>
    p {
      color: red !important;
    }
  </style>
</head>

<body>
  <p style="color: blue;">Texto de ejemplo</p>
</body>

En este caso, el párrafo aparecerá en rojo.

3.2. CSS interno y externo

Importante

El CSS interno no tiene prioridad sobre el CSS externo por el simple hecho de estar definido dentro del documento HTML.

Ambos participan en la cascada de la misma manera. Cuando las declaraciones tienen la misma importancia y especificidad, prevalece la que aparece más tarde.

Considera el siguiente archivo externo:

styles.css

p {
  color: blue;
}

Y el siguiente documento HTML:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Prioridad CSS</title>

    <style>
      p {
        color: red;
      }
    </style>

    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <p>Texto de ejemplo</p>
  </body>
</html>

El párrafo aparecerá en azul porque el archivo externo se enlaza después del elemento <style>.

Si intercambiamos el orden:

<head>
  <link rel="stylesheet" href="styles.css" />

  <style>
    p {
      color: red;
    }
  </style>
</head>

El párrafo aparecerá en rojo, porque ahora la declaración interna aparece después.

En ambos casos, las declaraciones tienen la misma importancia y especificidad.

Conclusión: Entre CSS interno y externo, el orden de aparición puede determinar el resultado, pero no existe una prioridad inherente de uno sobre otro.

4. Especificidad de los selectores

La especificidad es el mecanismo que permite determinar qué selector tiene prioridad cuando varias declaraciones compiten por establecer una misma propiedad y los criterios anteriores de la cascada no han resuelto el conflicto.

Cuanto mayor sea la especificidad de un selector, mayor será su prioridad frente a otros selectores de menor especificidad en las mismas condiciones de cascada.

4.1. Cómo se calcula la especificidad

La especificidad se representa mediante tres componentes:

(ID, CLASE, TIPO)

Componente	Selectores que incluye
ID	Selectores de identificador (#id).
CLASE	Selectores de clase (.clase), atributos ([atributo]) y pseudoclases (:hover).
TIPO	Selectores de tipo (p, div, h1) y pseudoelementos (::before).

Cada componente representa la cantidad de selectores de esa categoría.

Por ejemplo:

Selector	Especificidad
p	(0,0,1)
.destacado	(0,1,0)
#principal	(1,0,0)
p.destacado	(0,1,1)
#principal p	(1,0,1)
div.contenedor p.destacado	(0,2,2)

El selector universal (*) no incrementa la especificidad.

4.2. Comparación de especificidades

Los componentes se comparan de izquierda a derecha, comenzando por los ID.

1. Se compara el número de selectores ID.
2. Si coinciden, se compara el número de clases, atributos y pseudoclases.
3. Si también coinciden, se compara el número de selectores de tipo y pseudoelementos.

Por ejemplo:

• (1,0,0) tiene mayor especificidad que (0,5,3).
• (0,2,0) tiene mayor especificidad que (0,1,5).
• (0,1,2) tiene mayor especificidad que (0,1,1).

La especificidad no es una suma de puntos

Aunque tradicionalmente se explica utilizando 100 puntos para un ID, 10 para una clase y 1 para una etiqueta, ese sistema no representa correctamente el funcionamiento de CSS.

Por ejemplo, diez selectores de clase no superan la especificidad de un selector ID.

La especificidad se compara por componentes, no mediante una suma decimal.

4.3. Ejemplo práctico

<p id="principal" class="destacado">Texto de ejemplo</p>

p {
  color: green;
}

.destacado {
  color: blue;
}

#principal {
  color: red;
}

Las tres reglas afectan a la propiedad color del mismo elemento.

Sus especificidades son:

Selector	Especificidad	Color
p	(0,0,1)	Verde
.destacado	(0,1,0)	Azul
#principal	(1,0,0)	Rojo

El párrafo aparecerá en rojo, porque #principal tiene la mayor especificidad.

4.4. Especificidad y orden de aparición

La especificidad tiene prioridad sobre el orden de aparición cuando las declaraciones compiten en las mismas condiciones de cascada.

.destacado {
  color: blue;
}

p {
  color: red;
}

<p class="destacado">Texto de ejemplo</p>

Aunque p aparece después en la hoja de estilos, el texto será azul porque .destacado tiene mayor especificidad.

Por tanto, una regla posterior no sobrescribe necesariamente a una anterior.

5. Orden de aparición

Cuando dos declaraciones tienen la misma importancia y especificidad, y los demás criterios de la cascada no establecen diferencias, se aplica la que aparece más tarde.

p {
  color: red;
}

p {
  color: blue;
}

El párrafo aparecerá en azul, porque la segunda declaración aparece después.

Este comportamiento también se produce cuando los selectores son diferentes, pero tienen la misma especificidad.

.aviso {
  color: red;
}

.destacado {
  color: blue;
}

<p class="aviso destacado">Texto de ejemplo</p>

Ambos selectores tienen especificidad (0,1,0).

El texto aparecerá en azul, porque .destacado aparece después.

Si intercambiamos el orden de las reglas CSS, el resultado cambiará.

Orden de las clases HTML

El orden de los nombres de clase dentro del atributo class no determina la prioridad de las reglas CSS.

Por ejemplo:

<p class="aviso destacado">Texto</p>
<p class="destacado aviso">Texto</p>

Ambos elementos recibirán el mismo color si se les aplican las reglas del ejemplo anterior.

Lo que importa es el orden de las declaraciones CSS, no el orden de los nombres de clase en HTML.

6. Resumen de la prioridad CSS

En los ejemplos habituales de CSS de autor, sin capas de cascada, animaciones ni transiciones, podemos resumir el funcionamiento de la siguiente manera:

Criterio	Comportamiento
!important	Una declaración importante prevalece sobre una normal del mismo origen.
Estilos en línea	Prevalecen sobre las declaraciones normales de las hojas de estilo del autor.
Especificidad	Entre declaraciones comparables, prevalece el selector de mayor especificidad.
Orden de aparición	Si los criterios anteriores no resuelven el conflicto, prevalece la declaración posterior.

Recomendaciones

Para evitar conflictos y facilitar el mantenimiento del CSS:

• Utiliza preferentemente hojas de estilo externas.
• Emplea selectores de clase para aplicar estilos reutilizables.
• Evita utilizar selectores excesivamente específicos.
• No recurras a !important salvo cuando exista una razón justificada.
• Utiliza las herramientas de desarrollo del navegador para identificar qué declaraciones se aplican y cuáles han sido sobrescritas.

7. Referencias

Para ampliar la información sobre la cascada y la especificidad, consulta:

• MDN - CSS Cascading and Inheritance.
• MDN - Specificity.
• MDN - !important.
• W3C - CSS Cascading and Inheritance Level 5.