¿Qué es la especificidad en CSS?
La especificidad es la manera que tienen los navegadores para decidir qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados con prioridad sobre otros. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.
Jerarquía de la Especifidad
Cada tipo de selector tiene su puesto en la jerarquía de la especificidad; El puesto más alto lo ocupa el selector !important, seguido de los estilos en línea, los selectores #id, los de .clases, atributos y pseudoclases, los elementos y pseudoelementos, y por último el selector univarsal *.
[su_table responsive=»yes»]
| Selector | Valor |
| Estilos en Línea | 1,0,0,0,0 |
| #ID | 0,1,0,0,0 |
| .Clases, Pseudoclases, Atributos | 0,0,1,0,0 |
| Elementos, Pseudoelementos | 0,0,0,1,0 |
| Selector Universal * | 0,0,0,0,1 |
[/su_table]
Ejemplo:
Tenemos un <h1 id=»encabezado» style=»color:blue;»>Hola Soy un Encabezado H1</h1>
Al aplicar estilos le ponemos los siguientes:
a) h1 { color:red;}
b) #encabezado { color:green;}
See the Pen
especificidad by Alberto (@alnuper)
on CodePen.
Como puedes ver, el estilo en línea tiene un valor 10000 que es superior en especificidad al valor del #id (01000), y que el valor del propio elemento h1 (00010), por lo tanto se mostrará el color azul que le impone el estilo en línea.
Veamos ahora que sucede si le quitamos el estilo en línea:
See the Pen
especificidad by Alberto (@alnuper)
on CodePen.
Ahora, como ya preveíamos, coge el estilo que le da el #id, que en este caso es el color verde y que tiene un «valor» superior en especificidad al del propio elemento.
El Selector !important jerárquicamente es superior a todos, pero no está recomendado y es una mala práctica su uso, ya que rompe la cascada y puede llegar a complicarte o liarte a la hora de indicar los estilos. Úsalo con cuidado.
