Specificity

Especificidad

La especificidad en CSS es un concepto que determina qué conjunto de reglas de estilo se aplica a un elemento HTML cuando existen múltiples reglas que podrían afectarlo. Es decir, la especificidad es el mecanismo que CSS utiliza para resolver conflictos cuando dos o más reglas se aplican al mismo elemento y entran en conflicto.

La especificidad se calcula utilizando varios factores, y generalmente se representa como un número. Cuanto mayor sea el número de especificidad, mayor será la prioridad de la regla. Los factores que afectan a la especificidad son:

1. Selectores de ID: Un selector de ID tiene una alta especificidad y se representa como "100" en el cálculo de la especificidad.

2. Selectores de Clase, Atributo y Pseudo-clases: Los selectores de clase, atributo y pseudo-clases tienen una especificidad moderada y se representan como "10" en el cálculo de la especificidad.

3. Selectores de Elemento y Pseudo-elementos: Los selectores de elemento y pseudo-elementos tienen una baja especificidad y se representan como "1" en el cálculo de la especificidad.

4. Importancia: Si una regla tiene aplicado !important, entonces tendrá la máxima prioridad y anulará cualquier otra regla, independientemente de su especificidad.

5. Orden de Declaración: En caso de que dos reglas tengan la misma especificidad, la que se declare más tarde en el código CSS sobrescribirá a la anterior.

Para calcular la especificidad de una regla CSS, se utiliza la siguiente notación: (a, b, c), donde "a" representa el número de selectores de ID, "b" representa el número de selectores de clase, atributo y pseudo-clases, y "c" representa el número de selectores de elementos y pseudo-elementos.

Por ejemplo, si tienes la siguiente regla CSS:

#menu .enlace {
    color: blue;
}

La especificidad de esta regla sería (1, 1, 0), ya que hay un selector de ID (#menu) y un selector de clase (.enlace). Esto significa que esta regla tiene una especificidad de 101.

Comprender la especificidad es fundamental para resolver conflictos y aplicar estilos de manera efectiva en tus proyectos CSS. Te permite saber qué reglas se aplicarán a un elemento y cómo se resolverán los conflictos cuando existan múltiples reglas que lo afecten.

Ejemplo

Supongamos que trabajas con los siguientes elementos HTML y CSS:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

Aquí hay dos reglas que compiten entre sí. Uno le coloreará el botón de rojo y el otro, de color azul (este se aplica). ¿Qué regla se aplica al elemento? Comprender el algoritmo de la especificación de CSS en lo que respecta a la especificidad es la clave para comprender cómo CSS decide entre reglas competidoras.

La especificidad es una de las cuatro etapas distintas de la cascada.

Visualización de la especificidad

En los diagramas y las calculadoras de especificidad, la especificidad a menudo se visualiza de la siguiente manera:

El grupo izquierdo es id selectores. El segundo grupo son los selectores de clase, atributo y seudoclase. El grupo final son los selectores de elementos y pseudoelementos.

Como referencia, el siguiente selector es 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Para calcular la especificidad en CSS, puedes seguir esta regla general:

1. Contar el número de selectores de ID en la regla.
2. Contar el número de selectores de clase, atributo y pseudo-clases en la regla.
3. Contar el número de selectores de elemento y pseudo-elementos en la regla.

Luego, combinas estos números en un número de especificidad de tres dígitos, de la siguiente manera:

(a, b, c)

• "a" representa el número de selectores de ID.
• "b" representa el número de selectores de clase, atributo y pseudo-clases.
• "c" representa el número de selectores de elemento y pseudo-elementos.

Por ejemplo:

Si tienes la regla:

#menu .enlace {
    color: blue;
}

• Hay 1 selector de ID (#menu).
• Hay 1 selector de clase (.enlace).
• No hay selectores de elemento o pseudo-elementos.

Por lo tanto, la especificidad de esta regla sería (1, 1, 0). Y si lo representamos en términos de valor numérico, sería "110".

Si tienes múltiples reglas que afectan al mismo elemento, la regla con la especificidad más alta prevalecerá. Si dos reglas tienen la misma especificidad, la última regla declarada en el archivo CSS tomará prioridad.

Es importante tener en cuenta que la especificidad se calcula a nivel de regla individual, no a nivel de propiedad CSS. Por lo tanto, el cálculo de la especificidad se aplica a cada regla por separado, y la propiedad dentro de esa regla se aplicará basándose en la especificidad de esa regla.