Especificidad

Hay ocasiones en las que podemos encontrarnos en la situación de que un mismo elemento tenmúltiples definiciones para ser formateado de formas distintas:

.grape {color: purple;}
H1 {color: red;}
<H1>Meerkat <EM>Central</EM></H1>

En estos casos CSS define que se debe aplicar el estilo que sea más específico, ejemplo de gradación que aplicará un navegador a la hora de aplicar los estilos:

H1 {color: red;} /* specificity = 1 */
P EM {color: purple;} /* specificity = 2 */
.grape {color: purple;} /* specificity = 10 */
P.bright {color: yellow;} /* specificity = 11 */
P.bright EM.dark {color: brown;} /* specificity = 22 */
#id216 {color: blue;} /* specificity = 100 */

Por definición, los estilos heredados tendrán un valor de especificidad 0 y los aplicados a través de la propiedad STYLE, un valor superior a 100.

Importancia

Podemos marcar que ciertos estilos son más importantes que otros, pudiendo así modificar las reglas de especificidad aplicadas por el navegador. Un estilo importante se define añadiendo la coletilla !important al final del mismo:

P.dark {color: #333 !important; background: white;}

Esto estilos recibirán siempre el valor de especificidad más alto considerado por el navegador.

Como los estilos heredados tienen un valor de especificidad 0, esta definición se mantendrá aunque el estilo heredado contuviera la definicion !important.

Estilos en cascada

Cuando hay dos reglas que tienen la misma especificidad sobre el mismo elemento:

H1 {color: red;} H1 {color: blue;}

Debemos seguir el siguiente proceso para decidir qué estilos aplicar:

  1. Buscar todas las declaraciones que contengan un selector que encaje con un elemento dado.
  2. Ordenar por especificidad todas las declaraciones que se aplican a este elemento. También debemos ordenarlas por su origen como: Diseñador, navegante o navegador (la priorización sigue este orden).
  3. Ordenar por orden las declaraciones. Las últimas declaraciones tendrán un peso más elevado. Las declaraciones obtenidas como consecuencia de un IMPORT se considerarán como las primeras teniendo así un peso menor, al contrario de las resultantes de aplicar un STYLE que se pondrán al final de la lista con un peso más elevado.

Así el color obtenido para el elemento H1 será azul.

Del “bloque” al Iphone, como han evolucionado los móviles El teléfono celular se ha convertido en un dispositivo indispensable en la vida de las personas. Los teléfonos móviles han evolucionado con el paso de...
Llegó la versión web de Facebook Messenger Hace dos semanas, Facebook presentó una versión independiente para la Web de su mensajero instantáneo, Messenger. Ya se encuentra disponible en...
Adobe compra tecnología de cine a Iridas Adobe ha anunciado la compra de Iridas sin desvelar los detalles financieros del acuerdo. El software de vídeo de Adobe, Premiere Pro y After Effects,...
Ranking Buscadores Agosto 2011 Pese a la desactivación en Google de la herramienta RealTime con la que ofrecer resultados inmediatos obtenidos de fuentes como redes sociales, la bue...
Monitoriza tu presencia en la Web con Google Mantener el control sobre la información que ofrecemos de nosotros mismos en Internet es una tarea importante, cuyo mejor o peor cumplimiento puede ...
Windows 7 sigue detrás de XP en el ámbito empresarial aunque recorta distancias Windows XP todavía está presente en el 60% de los equipos de las empresas, mientras que el 21% ya funcionan bajo Windows 7, según indicca un informe d...
Scripts to install Webmails Roundcube - Free webmail for the masses. Roundcube webmail is a browser-based multilingual IMAP client with an application-like user interface. It pro...
Nuevo sistema japonés de reconocimiento facial indentifica un rostro entre 36 millones en 1 segundo El reconocimiento facial a través de la captura de imágenes o video no es una novedad. Desde hace muchos años se utiliza de diferentes maneras tanto c...
Google Analytics mide la velocidad de tu site Como muestra de la relevancia que Google concede a la velocidad, la última versión de su popular herramienta para webmasters, Analytics, incluye un in...
Servidor Dedicado versus servidor compartido Un servidor dedicado es uno que es utilizado únicamente por usted, este podría ser alojado en su empresa o en una ubicación dedicada al alojamiento d...
Especificidad y Estilos en Cascada
Tagged on: