Specificity en CSS

La specificity es uno de los criterios que utiliza el navegador (u otros agentes usuarios) en caso de conflicto para clasificar las instrucciones CSS existentes. Considere el siguiente ejemplo, muy simplificado:

h3 {color:# black;}
h3 {color:#red:}

Un h3 se representa en rojo ya que la instrucción aparece en último lugar.

Aquí el <h3> se representa en negro dentro de un <div>, a pesar de la instrucción siguiente que indica representar <h3> en rojo. Dicho de otra manera: todos los <h3> se representan en rojo a menos que aparezcan dentro de un elemento <div> en cuyo caso se representarán en negro.

Todas las reglas definidas en CSS tienen asignado un número interno de cuatro cifras. Este número es el que se tiene en cuenta internamente a la hora de ordenar las instrucciones en cascada.

Las normas que se siguen en el proceso son las siguientes:

Grupo A (primera cifra): reglas CSS definidas en el código fuente mediante un atributo style. El atributo HTML substituye en este caso al selector. Los estilos inline siempre obtienen la máxima prioridad , esto es, 1,0,0,0.

Grupo B (segunda cifra): el número de atributos ID del selector. Cada selector de atributo ID (#) tiene una valoración de 0,1,0,0.

Grupo C (tercera cifra): El número de todos los demás atributos (incluidas las clases) y pseudo-clases dentro del selector. Todos los selectores de clase o pseudo clase obtienen 0,0,1,0.

Grupo D (cuarta cifra): El número de nombres de elemento y pseudo elementos que contiene el selector. Todos los selectores de elemento o pseudo elemento obtienen un 0,0,0,1 en la ordenación.

Combinadores y selectores universales no reciben ningún puesto en la ordenación. Lo mismo sucede con los elementos y atributos del código fuente, los cuales quedan catalogados como “despreciables” (deprecated) por W3C. El navegador tiene que convertirlos a su equivalente de CSS para poder interpretarlos.

El navegador interpreta los grupos de izquierda a derecha y los clasifica en ese mismo orden. Si aparecen definiciones equivalentes, tendrán prioridad las que se hallen más a la izquierda.

La tabla siguiente nos da una idea más clara de estos valores.

Selector	A Estilo	B ID	C Clase	D Elemento	Specificity
* {…}	0	0	0	0	0000
p {…}	0	0	0	1	0001
ul li {…}	0	0	0	2	0002
ul li.red {…}	0	0	1	2	0012
#name {…}	0	1	0	0	0100
div#menu a:hover {…}	0	1	1	2	0112
style=”…”	1	0	0	0	1000

Es posible manipular la specificity y conseguir así determinados objetivos de diseño. Una manera artificial de aumentar la specificity podría ser la siguiente:

p.name {…} =0011
#content p.name {…} =0111
html body #content p.name {…} = 0113

Todas estas reglas se aplican al elemento p.name, pero cada regla tiene prioridad frente a las anteriores. Si trabajamos con hojas de estilo alternativas, éste puede ser un modo interesante de incrementar prioridades.

Resumen

El orden jerárquico en que un navegador procesará una serie de instrucciones y elementos en cascada:

• El navegador explora el documento en busca de instrucciones de estilo.
• Las instrucciones de valor equivalentes se clasifican en función de su procedencia. Las reglas son:
• Las hojas de estilo de usuario señaladas como !important tienen prioridad frente a las de autor también señaladas como !important.
• Las hojas de estilo de autor señaladas como !important tienen prioridad frente a las que no llevan !imporant.
• Las hojas de estilo de autor sin !important tienen prioridad frente a las hojas de estilo de usuario sin !important.
• Las hojas de estilo de usuario sin !important tienen prioridad frente a las hojas de estilo del navegador.
• Cuando tengamos indicaciones de la misma importancia dentro de una hoja de estilo (de autor, usuario o navegador), se calculará su specificity y se ordenarán en función de ella.
• Cuando haya instrucciones de igual specificity dentro de una hoja de estilo, se utilizará la que aparezca en último lugar