Prioridad de estilos en CSS

06/03/20230 comentarios

Hola a todos, hoy os voy a explicar como se calcula la prioridad en los estilos de CSS.

¿Nunca te has preguntado como CSS sabe que estilo debe mostrar cuando tenemos tantos?

Esto no se hace de forma casual, cuanto más especifico sea, más prioridad tendrá y machacará a otros estilos.

La prioridad se divide en 3 parte diferentes:

Nivel 1: Selectores de id.
Nivel 2: Selectores de clase, selectores de atributos y pseudo-clases.
Nivel 3: Selectores de tipo y pseudoelementos.

Un ejemplo seria este:

div#id1 .clase1

Tenemos un selector de id (Nivel 1), otro de clase y otro de tipo, lo que lo podemos traducir como (1,1,1).

Otro ejemplo:

div#id1.clase1.clase2

Tenemos un selector de id (Nivel 1), 2 de clase y otro de tipo, lo que lo podemos traducir como (1,2,1).

Para saber quien tiene más prioridad, iremos mirando el nivel de cada uno de ellos desde el nivel 1 hasta el 3, si en el nivel 1 hay un empate, miraremos el siguiente, si lo sigue habiendo miraremos en el nivel 3.

Cuando en uno de los niveles sea superior a la de la otra regla, esta es mas prioritaria, dando igual si el resto de niveles tiene más.

Por lo que la última regla tiene mas prioridad que la primera ya que en el nivel 2 tiene un valor mayor a la primera.

En caso de empate total, la prioridad será la última escrita en el CSS.

El selector universal (*), los combinadores (+, >, ~, ␣, ||) y la pseudo-clase de negación (:not()) no tienen efecto sobre la especificidad.

Os dejo aquí una herramienta muy útil para calcular el peso de nuestras reglas de una forma más gráfica. Recuerda de pulsar en ordenar.

También podemos «romper» esa prioridad con la palabra !important a una propiedad en concreto, esto hace que automáticamente tenga mas prioridad esa prioridad en concreto.

Solo es recomendable como ultima opción para mostrar nuestros estilos propios, muy común para bibliotecas externas como bootstrap.

También tenemos los enlaces internos, que son los que más prioridad tienen. Son aquellos estilos que estan dentro de un style en HTML.

Veamos un ejemplo de todo lo explicado.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.