¿Qué es la especificidad en CSS? 🕵️‍♀️

La especificidad en CSS determina qué regla de estilo se aplicará a un elemento HTML cuando hay múltiples reglas compitiendo entre sí.

El cálculo de especificidad tiene en cuenta los selectores utilizados en cada regla, y se sigue un orden de prioridad para determinar qué estilo se aplicará finalmente.

¿Cómo podemos asignar estilos CSS?

Hay diferentes formas de asignar estilos a elementos HTML.

Las consecuencias de aplicar una forma u otra irá más allá que simplemente llevar el código CSS a un archivo diferente al HTML, determinarán la especificidad.

A continuación te enumero las diferentes formas de aplicar estilos CSS ordenados de menor a mayor en cuanto al peso que tienen a la hora de aplicar especificidad.

Selectores de elementos HTML

Los selectores de elementos HTML los utilizamos cuando queremos aplicar un estilo a todos los elementos de una página.

Imagina que quieres asignar a todos los elementos párrafo de tu página de HTML un interlineado de 1.5 rem, lo que harías sería:

//ASIGNANDO ESTILOS POR SELECTORES
p {
    line-height: 1.5rem;
    }
  

Esta forma de asignar estilos tienen el menor valor de especificidad, en concreto, cada selector tiene un peso en la especificidad de 0,0,0,1

Selectores de clase, atributo y pseudoclase

Si no sabes qué es una clase CSS, un atributo o una pseudoclase te lo muestro en código:

//CLASE
.clase {
    line-height: 1.5rem;
    }
        

//ASIGNANDO ESTILOS POR ATRIBUTO

//HTML
<p atributo="mi_atributo">Esto es un párrafo.</p>

//CSS
[p[atributo="mi_atributo"]] {
    line-height: 1.5rem;
    }
        

//PSEUDOCLASE
.clase:hover {
    cursor: pointer;
    }
        

Los selectores de clase, los selectores de atributo y los selectores de pseudoclase tienen un valor de especificidad mayor que los selectores de elementos.

Cada uno de ellos tiene un valor de especificidad de 0,0,1,0.

Selectores de id

//ASIGNANDO ESTILOS POR ID

//HTML
<p id=mi_id>Esto es un párrafo.</p>
            
//CSS
#mi_id {
    line-height: 1.5rem;
    } 
        

Los selectores de ID tienen un valor de especificidad de 0,1,0,0.

Selectores de estilo en línea

//ASIGNANDO ESTILOS EN LÍNEA

//HTML
<p styles="line-height: 1.5rem">Esto es un párrafo.</p>
            
        

Los estilos en línea tienen la mayor especificidad y anulan cualquier otro estilo aplicado a un elemento.

Cada estilo en línea tiene un valor de especificidad de 1,0,0,0.

¿Cómo se decide qué estilo aplicar cuando hay colisión en especificidad?

Si hay varias reglas con la misma especificidad, se aplicará la regla que aparece más tarde en el código CSS.

Esto significa que las reglas que se encuentran más abajo en un archivo CSS o en la hoja de estilos en línea tendrán prioridad sobre las que se encuentran arriba.

Por ejemplo imagina el siguiente código HTML

<p class="clase_uno">Este es el primer párrafo.</p>

<p class="clase_uno clase_dos">Este es el segundo párrafo.</p> 👈

Y el siguiente código CSS

.clase_uno {
    line-height: 1.5rem;
    }

.clase_dos {
    line-height: 3rem;
    }

Si te fijas, ¿qué clase se aplicará al segundo párrafo?

Como te expliqué al principio, si hay varias reglas con la misma especificidad, se aplicará la regla que aparece más tarde en el código CSS.

Entonces la altura de línea que se asignará al segundo párrafo será de 3rem que corresponde a la clase_dos por aparecer después de la clase_uno.

Hasta luego 🖖