Especificidad CSS: Qué es y cómo se calcula

En este tutorial vamos a ver en qué consiste la especificidad CSS, cómo calcularla y cómo puedes sacarle partido en tus hojas de estilo. La especificidad es uno de los parámetros utilizados por los algoritmos de cascada CSS con el fin de determinar los valores que se deben aplicar a cada propiedad.

Qué es la especificidad CSS

La especificidad es el orden de precedencia o la prioridad con la que se aplican los estilos CSS cuando existen varias reglas que hacen referencia a una o más propiedades de un mismo elemento con selectores diferentes.

Vamos a poner como ejemplo el siguiente elemento:

<p class="fruta">Manzana</p>

Ahora vamos a signarle un valor a la propiedad color de la clase .fruta del ejemplo anterior:

.fruta {
  color: yellow;
}

Además, vamos a asignar también la misma regla a la etiqueta p, aunque en este caso le daremos otro valor a la propiedad color:

p {
  color: green;
}

Cuando estas dos propiedades están presentes, siempre tendrán prioridad los estilos aplicados a una clase respecto a los aplicados a una etiqueta cuando ambos estén presentes y den un valor a las mismas propiedades. Del mismo modo, la siguiente regla tendrá preferencia sobre las anteriores:

p.fruta {
  color: rojo;
}

Esto es debido a la especificidad CSS: Es decir; cuanto más específica sea una regla, mayor prioridad tendrá sobre todas las demás. En caso de que dos reglas tengan la misma especificidad, se aplicará aquella que esté definida en último lugar.

Cómo calcular la especificidad

La especificidad CSS se calcula  de un modo muy sencillo en base a la siguiente prioridad de las reglas CSS:

1. Etiquetas: Las etiquetas o tipos de elemento son el selector menos prioritario. Tanto las clases como los identificadores o los estilos en línea tendrán más prioridad.
2. Clases y pseudo clases: Las clases y pseudo clases tienen más prioridad que las etiquetas por ser selectores más específicos, pero menos prioridad que los identificadores y los estilos en línea. Los selectores de atributo también se ponderan como si fuesen clases en lo referente a su prioridad.
3. Identificadores: Los identificadores id son el selector más específico de las hojas de estilo, ya que hacen referencia a un único elemento. Solo los estilos en línea tienen mayor prioridad.
4. Estilos en línea: Los estilos aplicados en el código HTML a cada elemento mediante el atributo style siempre tendrán prioridad sobre todos los demás, gozando de la mayor especificidad.

Sin embargo, es posible encontrar varios selectores anidados, por lo que representaremos la especificidad de los elementos del siguiente modo en función de los selectores utilizados:

0 0 0 0

Tenemos cuatro números, a los que llamaremos espacios, que inicializamos a cero. Están ordenados por su relevancia, de modo que el número de la izquierda es el más importante, y el de la derecha el menos importante. Estos espacios se juntarán finalmente conformando un único número, de modo que el número 1 0 0 0 será siempre mayor que el número 0 1 0 0, del mismo modo que los números enteros.

Especificidad de las etiquetas

Comenzaremos calculando el número que está más a la derecha incrementando su valor en una unidad con cada tipo de elemento o etiqueta a la que se haga referencia en el selector:

p {
  /* 0 0 0 1 */
}
.container span {
  /* 0 0 0 1 */
} 
div p {
  /* 0 0 0 2 */
} 
div > p {
  /* 0 0 0 2 */
}
div p > span {
  /* 0 0 0 3 */
}
div.container p > span {
  /* 0 0 0 3 */
}

Especificidad de las clases

Vamos a calcular ahora el segundo número comenzando por la derecha, que se incrementará en una unidad por cada clase, pseudo clase o selector de atributo al que se haga referencia en el selector:

.container {
  /* 0 0 1 0 */
}
.container .row {
  /* 0 0 2 0 */
}
[href$='.pdf'] {
  /* 0 0 1 0 */
}
:hover {
  /* 0 0 1 0 */
}
div .row {
  /* 0 0 1 1 */
}
a[href$='.pdf'] {
  /* 0 0 1 1 */
}
.container img:hover {
  /* 0 0 2 1 */
}
.container.container {
  /* 0 0 2 0 */
}

Tal y como ves, la especificidad también aumentará aunque se repita varias veces la misma clase.

Especificidad de los identificadores

Vamos a calcular ahora el tercer número comenzando por la derecha, que se incrementará en una unidad por cada identificador id al que se haga referencia en el selector:

#color {
  /* 0 1 0 0 */
}
.container #color {
  /* 0 1 1 0 */
}
#color span {
  /* 0 1 0 1 */
}

Un elemento puede tener asignadas varias clases, pero solamente un identificador.

Especificidad de los estilos en línea

Vamos a calcular ahora el último número, que se corresponde con el cuarto número comenzando por la derecha. Cada vez que aparezca un estilo en línea en el código HTML, tendrá preferencia sobre cualquier regla definida en una etiqueta style o en un archivo CSS externo:

<span style="color: red">Test</span> <!-- 1 0 0 0 -->

Siempre que aparezca una regla CSS en el interior del atributo style, será aplicada. La única excepción será cuando usemos la cláusula !important en nuestra hoja de estilos o en el atributo style, tal y como veremos a continuación.

En caso de que la misma regla esté definida varias veces en el atributo style de un elemento, siempre se tendrá en cuenta la última en aparecer, por lo que el siguiente texto se mostraría en color azul:

<p style="color: red; color:blue;">Test</p>

La cláusula !important

La cláusula !important anula las reglas de especificidad, teniendo prioridad de precedencia sobre todas las demás. Se coloca justo después de definir el valor de una propiedad CSS:

p {
  color: orange !important;
}

Cuando agregas !important a una regla CSS, pasará a ser más importante que el resto. El único modo de sobrescribir una regla CSS que tiene esta cláusula consiste en agregar !important a una regla que tenga más prioridad que la que ya lo incluye.

Si existen dos reglas que incluyen la cláusula !important y ambas tienen la misma especificidad, se aplicará la que esté definida más tarde en el documento o en la lista de estilos en línea.

Consejos adicionales

Por lo general, siempre es preferible usar clases CSS en tus hojas de estilo en lugar de usar identificadores, ya que los identificadores solamente pueden ser aplicados a un único elemento, por lo que no son reutilizables. Además, puedes asignar múltiples clases a un mismo elemento. Esto, unido a que la especificidad de los identificadores es excesiva, hacen que no sea el mejor selector. Frameworks CSS como Tailwind se basan únicamente en clases.

Tampoco conviene abusar de la cláusula !important, que debería restringirse a ciertos casos muy particulares. Lo recomendable es no incluir la cláusula !important en las hojas de estilos CSS, usándola muy puntualmente en los estilos CSS en línea, de modo que afecten a un único elemento.

Si quieres calcular rápidamente la especificad de un elemento, puedes usar alguna herramienta online como esta.

---