¿Qué es la especificidad en CSS?

La especificidad en CSS es un mecanismo que determina qué regla de estilo se aplicará a un elemento si hay varias reglas aplicables.

Cada selector tiene su propio puntaje de especificidad. Un puntaje más alto indica una prioridad más alta.

El cálculo de la especificidad se basa en la cantidad de los siguientes componentes en el selector (de mayor a menor importancia):

• Cientos (1000): Reglas con !important (tienen la máxima prioridad, pero su uso no se recomienda).
• Cientos (100): Estilos en línea (escritos directamente en el atributo style del elemento HTML).
• Cientos (100): Identificadores (selectores por id, por ejemplo #mi-elemento).
• Decenas (10): Clases (selectores por .clase), pseudoclases (por ejemplo :hover, :focus), atributos (por ejemplo [type="text"]).
• Unidades (1): Tipos de elementos (nombres de etiquetas HTML, por ejemplo div, p), pseudoelementos (por ejemplo ::before, ::after).
• Cero (0): Selector universal (*), combinadores (>, +, ~), selector de padre (:not(), :is(), :where()) no añaden especificidad por sí mismos, pero pueden influir en la especificidad dentro de los paréntesis.

Ejemplo de cálculo:

• p { ... } - Especificidad: 0-0-0-1
• .mi-clase { ... } - Especificidad: 0-0-1-0
• #mi-id { ... } - Especificidad: 0-1-0-0
• div.mi-clase { ... } - Especificidad: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Especificidad: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Si dos reglas tienen la misma especificidad, se aplica la que aparece más abajo en el archivo CSS.

Ejemplo:

/* Archivo style.css */
.mi-elemento {
  color: blue; /* Especificidad: 0-0-1-0 */
}

#elemento-id {
  color: red; /* Especificidad: 0-1-0-0 */
}

.mi-elemento {
  font-weight: bold; /* Especificidad: 0-0-1-0, sobreescribe la regla anterior con la misma especificidad */
}

En este caso, el texto del elemento con id elemento-id será rojo, y el texto del elemento con la clase mi-elemento será azul y en negrita (el azul se sobreescribe por el rojo en el elemento con ambos selectores debido a la mayor especificidad de #elemento-id).

Comprender la especificidad es importante para escribir CSS predecible y fácil de mantener. Evite la especificidad excesivamente compleja y el uso de !important para una mejor gestión de estilos.