Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y 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 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 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 esta es la que ha ganado. El tercer elemento tiene un identificador y estas 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 esta 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 pseudoclases en el selector. Y por último, D cuenta el número de elementos y pseudoelementos.

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. Obtenemos 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 Specifity” se representa la especificidad de CSS mediante una serie de iconos basados en la película El resplandor. Y en “CSS: Specifity Wars” se representa con personajes de la Guerra de las Galaxias. Curioso, ¿verdad?

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.