En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar qué es la especificidad de las reglas en CSS.
Antes de ver este vídeo, deberías haber visto los vídeos sobre los mecanismos del procesamiento en cascada y la herencia en CSS.
Supongamos que esta página web que contiene una lista con cinco elementos. El segundo elemento tiene definida una clase llamada important, el tercer elemento un identificador, el cuarto elemento un identificador y una clase y el quinto y último elemento, un identificador, una clase y un estilo en línea con el atributo style.
Este es el CSS que he definido para la página de ejemplo. Hay varias combinaciones de selectores, con identificador, con clase y con elemento. Teniendo en cuenta este código HTML y este código CSS, te propongo como ejercicio, que intentes averiguar el color con el que se va a mostrar cada elemento de la lista. ¿Ya lo sabes? Pulsa stop si lo quieres pensar un poco. De todos modos, te voy a ayudar un poco.
El primer elemento de la lista no tiene ni un identificador, ni una clase, ni un estilo en línea. Por tanto, estas son las dos únicas reglas CSS que se pueden aplicar, pero, ¿cuál de ellas ganará?, ¿cuál de ellas definirá el color de este elemento?
El segundo elemento de la lista tiene definida una clase. Estas cuatro reglas se pueden aplicar a este elemento.
El tercer elemento tiene definido un identificador, así que se pueden aplicar estas tres reglas.
El cuarto elemento tiene definido un identificador y una clase, así que se pueden aplicar todas las reglas de CSS.
El último elemento también tiene definido un identificador y una clase, así que también se pueden aplicar las cinco reglas definidas en la hoja de estilos, además, tiene definido un estilo en línea con el atributo style.
¿Ya sabes con qué colores se va a mostrar cada elemento de la lista? Esto es lo que finalmente se visualiza, ¿lo habías adivinado? Vamos a analizar lo que ha ocurrido.
El primer elemento de la lista, no tiene ni un identificador, ni una clase. Estas son las dos únicas reglas que se pueden aplicar, pero esta es la regla que ha ganado, ¿por qué? En breve lo sabrás.
El segundo elemento de la lista, tiene una clase, se pueden aplicar estas cuatro reglas y ésta es la que ha ganado.
El tercer elemento tiene un identificador y éstas son las tres reglas que se pueden aplicar. Ha ganado la primera regla, la que tiene un identificador.
El cuarto elemento tiene un identificador y una clase, se pueden aplicar todas estas reglas y ésta es la que ha ganado, otra vez la del identificador.
Por último, este elemento tiene de todo, identificador, clase y atributo style con una regla de CSS en línea. Al final, lo que gana es el atributo style.
Claro, se puede pensar que esto es una tontería, que nadie va a hacer algo parecido a esto, pero cuando un CSS tiene miles de líneas o, en una misma página web se juntan varios CSS, pueden ocurrir estas cosas.
Cuando hay varias reglas en conflicto ¿cómo se decide qué regla gana y se debe aplicar? Se decide mediante un concepto de CSS llamado Specificity, que se puede traducir por especificidad. La especificidad de un selector se calcula de la siguiente forma: Se tiene que calcular un valor formado por cuatro componentes a, b, c y d. A vale 1 si existe el atributo style, b cuenta el número de identificadores en el selector, c cuenta el número de clases y pseudo clases en el selector y, por último, d cuenta el número de elementos y pseudo elementos.
Volviendo al CSS del ejemplo, se puede construir esta tabla con las diferentes reglas y su especificidad. Esta tabla la podemos reordenar. Primero se ordena por el valor a, luego por el b y así sucesivamente. O tenemos esta tabla de menor especificidad a mayor especificidad, o dicho de otra forma, de menor a mayor importancia. Con esta tabla ya podemos saber qué regla se aplica en cada caso.
Por ejemplo, para el segundo elemento de la lista se puede aplicar cualquiera de estas cuatro reglas de CSS, estas son las especificidades de cada regla. La primera regla es la que gana y por eso se muestra el elemento con el color verde. Por último, si eres un poco friki, seguro que te gustará lo siguiente. En CSS Specificity, se representa la especificidad de CSS mediante una serie de iconos basados en la película El Resplandor. Y en CSS Specificity Wars, se representa con personajes de La Guerra de las Galaxias, curioso, ¿verdad?
Muchas gracias por tu atención.
Aspectos clave
Debes ver el vídeo CSS: especificidad de las reglas en el que se explica la forma de calcular el valor de una propiedad de CSS cuando existe un conflicto porque hay varias reglas que se pueden aplicar de forma simultánea al mismo elemento.