Tal y como indicábamos en nuestro anterior post, Inicializar los estilos. Reset CSS, la visualización de las páginas web en un navegador se ven afectadas por los hojas de estilo que se cargan. Asimismo, se indicó que hay una prelación entre ellas.

En este post, vamos a hablar de los conceptos: cascada, especificidad  y herencia.

Cascada

Cuando dos o más reglas coinciden en un mismo elemento, dicho conflicto se resuelve mediante un proceso denominado cascada.

La cascada es el orden de prelación, importancia, que se le asigna a cada regla de las hojas de estilos. De ahí, que las hojas de estilo de autor/diseñador se consideren las más importantes, seguidas por las hojas de estilo de usuario y por último, las hojas de estilo predefinidas por el navegador.

El orden de importancia de las hojas de estilo coincide con el orden de carga de las hojas CSS al visualizar una página web: de izquierda a derecha, de menor a mayor prelación.

Sin embargo, teniendo en cuenta la accesibilidad web y su principio básico de eliminación de barreras para el acceso a la información para determinados grupos de personas – discapacitados y mayores-, el usuario mediante la regla !important toma el control de la presentación visual al asignar a su regla el máximo nivel de importancia, incluso por encima de las reglas !important declaradas por el autor/diseñador.

El orden de importancia de los estilos declarados es de mayor a menor:

  1. Estilos de usuario etiquetados como !important
  2. Estilos de autor/diseñador etiquetados como !important
  3. Estilos de autor/diseñador
  4. Estilos de usuario
  5. Estilos aplicados por el navegador

Ejemplo de declaración de !important:

el resultado será: Prueba de especificidad

El texto se muestra en rojo porque la regla color:red está declarada como de mayor importancia, rompiendo de esta forma, con la norma sobre especificidad que a continuación pasaremos a tratar.

Especificidad

Las reglas se ordenan según lo específico que sea el selector. Las reglas con selectores más específicos tienen prioridad sobre aquellas reglas con selectores menos específicos, es decir, más genéricos.

El color del texto será verde: Prueba de especificidad.

El selector de tipo <p> es el mismo en las tres declaraciones y su importancia es la  misma, pero el texto se pintará de color verde (color: green;) porque la declaración p id=”especial” es la más específica, la más concreta. Es decir, sólo se aplicará a aquellos párrafos que lleven el selector ID.

Las otras declaraciones tienen un carácter mucho más genérico; bien para todos los párrafos –p color: red-; obien, para todos los elementos de la página – * color: blue-.

Si dos reglas tienen la misma especificidad, la última definida tiene prioridad.

El resultado es el texto en rojo (Prueba de especificidad) porque ambos selectores <p> tienen la misma prioridad, pero prevalece el último definido, p color: blue.

Para calcular cómo de específica es una regla, cada tipo de selector tiene asignado un valor numérico.  La especificidad de una regla se calcula al sumar el valor de cada uno de sus selectores.

La especificidad de un selector se divide en cuatro niveles:

  1. Nivel A es igual a 1 si el estilo es un estilo en línea
  2. Nivel B es igual al número total de selectores ID
  3. Nivel C es igual al número de selectores de clase, pseudo clase y atributo
  4. Nivel D es igual al número de selectores tipo y selectores pseudo elemento

Una regla escrita en un atributo de estilo/style siempre será más específica que cualquier otra regla. Una regla con un ID será más específica que una sin un ID, y una regla con un selector de clase/class será más específica que una regla con selectores tipo (h1-h6, p, etc.).

La especificidad de las hojas CSS permite establecer estilos generales para elementos comunes y luego ir anulándolos para elementos más concretos, más específicos.

Herencia

Los documentos HTML están estructurados de forma jerárquica para ordenar el contenido. El primer elemento de esta estructura es el <html>, y de él son descendientes el resto de elementos que constituyen y forman una página web.

Esta característica de las hojas de estilo nos va ha permitir que determinadas propiedades como por ejemplo color o tamaño de la fuente no se tenga que indicar elemento por elemento, sino que con indicárselo al elemento padre, éste, por herencia, lo trasladará a sus hijos, a sus descendientes.

Con motivo de esta característica, se nos puede dar el caso que un elemento herede valores de todos sus superiores jeráquicos.

Los párrafos en rojo con tipo de fuente Arial, tamaño 14px.

La herencia se puede interumpir si declaramos una nueva regla CSS. Por ejemplo, indiquemos que el color para body y sus descendientes es negro,  pero cambiemos el tipo de fuente, tamaño,  y color para el elemto p.

La regla definida para el elemto <p> prevalece sobre las que debería heredar de sus elementos superiores jerárquicos. Al igual que en la la especificidad, la regla CSS más próxima tiene mayor prioridad. Así, si en el elemento aplicamos una regla de estilo directa, ésta prevalecerá sobre la que se haya definido en las hojas de estilo CSS.

Información de interés: