Programación Web » Aprender CSS » Unidad 1. Aprender CSS:

Specificity en CSS

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

Artículos de navegación

Acerca del Profesor

Adrián Delgado Rodríguez

Ingeniero en Computación, docente por convicción y apasionado por la programación Web.

Actualmente trabaja como Profesor para en el Centro Universitario de la Costa de la Universidad de Guadalajara y como Desarrollador Web.

Síguenos:

 

Ver el perfil completo de Hugo Adrián Delgado Rodríguez (akus.net).

Deja un comentario

avatar comentario
Jose
La palabra clave !important se utiliza para dar mayor prioridad a una instrucciones, de manera que las instrucciones siguientes no puedan sobrescribirla.




Diseño de páginas Web en Puerto Vallarta y Bahía de Banderas akus.net
subir

Síguenos en Facebook

Artículo de la semana

Cómo iniciar una página WebMetodología para la creación de sitios

Comprende las fases de Análisis, Planificación, Contenido, Diseño. ¿Qué método utilizas?