¿Cómo se calcula la especificidad en CSS?

La especificidad en CSS es el mecanismo que utilizan los navegadores para decidir qué regla de estilo se aplica a un elemento cuando existen múltiples reglas que podrían afectarlo y entran en conflicto. Funciona asignando un «peso» o «puntuación» a cada selector CSS. La regla con el selector de mayor especificidad será la que prevalezca.

Aunque no hay una «fórmula» matemática exacta que se sume, el cálculo se entiende mejor como una comparación de contadores para diferentes tipos de selectores, generalmente en este orden de importancia (de mayor a menor):

1. Estilos en línea (Inline Styles):
   Un estilo aplicado directamente a un elemento HTML mediante el atributo style (ej. <p style="color: red;">) tiene la máxima prioridad, ganando sobre casi cualquier selector en una hoja de estilos. Se puede considerar como la categoría más alta.
2. Selectores de ID:
   Cuenta el número de atributos ID en el selector (ej. #encabezado, #nav .logo). Cada ID aporta un peso significativo.
3. Selectores de clase, atributos y pseudo-clases:
   Cuenta el número total de:
   • Selectores de clase (ej. .mi-clase, .boton-activo).
   • Selectores de atributo (ej. [type="text"], [href^="https://"]).
   • Pseudo-clases (ej. :hover, :focus, :nth-child(), :first-child).
4. Selectores de tipo (elemento) y pseudo-elementos:
   Cuenta el número total de:
   • Selectores de tipo de elemento o etiqueta (ej. p, div, h1, span).
   • Pseudo-elementos (ej. ::before, ::after, ::first-letter).

Cómo se comparan:

Cuando se comparan dos selectores, se mira el «número» obtenido en cada una de estas categorías, de izquierda a derecha (empezando por los IDs, luego Clases/Atributos/Pseudo-clases, y finalmente Elementos/Pseudo-elementos).

• Un selector con un valor mayor en la categoría de «IDs» ganará, sin importar cuántos tenga en las categorías inferiores. Por ejemplo, un selector con 1 ID es más específico que un selector con 100 clases y 0 IDs.
• Si los contadores de «IDs» son iguales, se compara la categoría de «Clases, Atributos y Pseudo-clases».
• Si esta también es igual, se compara la categoría de «Elementos y Pseudo-elementos».

Ejemplos de puntuación conceptual (ID - Clases/Atributos/Pseudo-clases - Elementos/Pseudo-elementos):

• p -> 0-0-1
• .miClase -> 0-1-0
• div.miClase -> 0-1-1
• #miId -> 1-0-0
• #miId .otraClase a:hover -> 1-2-1 (1 ID, 2 [clase + pseudo-clase], 1 Elemento)

No añaden especificidad:

El selector universal (*), los combinadores (espacio, >, +, ~) y la pseudo-clase :where() no aumentan la especificidad. La pseudo-clase :not() en sí misma no añade, pero sí lo hacen los selectores dentro de sus paréntesis. :is() toma la especificidad de su argumento más específico.

Finalmente, la directiva !important aplicada a una declaración individual (ej. color: red !important;) anula todos los cálculos de especificidad, por lo que debe usarse con mucha precaución y solo como último recurso.