Especificidad CSS

La especificidad dentro de los estilos en cascada, hace referencia a que tan específico es un selector a la hora de aplicar las reglas CSS a un elemento HTML.

Como vimos en un articulo anterior, la cascada va más allá de la aplicación de las reglas CSS por orden de aparición; engloba tres términos importantes para la resolución de conflictos a la hora de afectar a un mismo elemento... La excepción !important, la especificidad y el orden de aparición en el código.

En esta entrada profundizaremos un poco más en el tema de la especificidad, ¿Cómo se calcula la especificidad? ¿Porqué es más aconsejable hacer uso de la especificidad sobre la clausula !important?

La especificidad se calcula en base a cuatro elementos diferentes con la siguiente jerarquia...

1000

  para declaraciones dentro del atributo style de un elemento HTML.

100

  para cada declaracion de tipo id (#) contenida en el selector.

10

  para cada selector de clase [.] pseudo clases [:hover] y/o selectores de atributo (type='hidden')].

1

  para cada selector de tipo (h1) o pseudo elemento (:after).

Entonces visto lo anterior veamos el siguiente caso sencillo; imaginemos que tenemos un h1 como el siguiente...


 <h1 class="titles" id="title">Este es el titulo</h1>
Y un código CSS como el siguiente
 
 .titles{
 color: blue;
 }
 
 h1{
 color: red;
 }
 

¿Qué regla será aplicada al elemento HTML? ¿Porqué? Por el orden del codigo podriamos pensar que la ultima regla declarada tendrá preferencia sobre l primera, pero recordemos que el orden del código es el último factor a tomar en cuenta, antes esta la especificidad... Entonces para responder esto veamos cuanto puntúa cada regla según la tabla de especificidad vista anteriormente. Para el primer caso, la regla que emplea un selector por clase puntúa 10, para el segundo caso la regla que emplea el selector por tipo puntúa 1. Por lo tanto los estilos aplicados en este caso serán los declarados en la regla con el selector por clase.

Con este ejemplo sencillo vemos como es que se evaluan los conflictos que surgen en CSS sobre un mismo elemento. Pero veamos otro ejemplo para que quede más claro.

Dejemos volar la imaginación y pensemos que tenemos un contenedor con un párrafo y un segmento de texto como el siguiente...


<div class='container'>
 <p class='paragraph'>Este es un pequeño <span class='text-resalt' >ejemplo</span></p>
</div> 

Y el css...


 .container span.resalt-text{
 color: red;
 }
 
 .paragraph .resalt-text{
 color: darkblue;
 }

En este caso los estilos que sobresalen son los de la primer regla ya que su especificidad suma 21 ya que tiene dos selectores de clase y uno de tipo; Mientras que para la segunda regla es de 20 dos selectores de clase.

Es así como se determina el nivel de especificidad de los selectores para determinar que propiedades sobresalen de otras en las reglas CSS declaradas, es importante dominar perfectamente este termino para evitar caer en el mal uso de la clausula !mportant ya que dicha clausula es recomendable utilizarla como un último recurso.