¿Qué sabes sobre la especificidad de los selectores CSS?

La especificidad determina la prioridad de las reglas CSS en caso de conflicto, cuando diferentes estilos se aplican a un mismo elemento. Se calcula para cada selector en la regla.

La especificidad es una evaluación numérica compuesta por cuatro categorías (A, B, C, D), que se escribe como 0,0,0,0. Cuanto mayor sea el número, mayor será la especificidad.

Categorías:

• A (estilo en línea): Estilos definidos mediante el atributo style en el elemento HTML. Tienen la mayor especificidad (por ejemplo, 1,0,0,0).
• B (ID): Selectores por ID (por ejemplo, #mi-id). Aumentan el segunda dígito (por ejemplo, 0,1,0,0).
• C (Clase, Atributo, Pseudo-clase): Selectores por clase (por ejemplo, .mi-clase), atributo (por ejemplo, [type="text"]), pseudo-clase (por ejemplo, :hover, :first-child). Aumentan el tercer dígito (por ejemplo, 0,0,1,0).
• D (Elemento, Pseudo-elemento): Selectores por etiqueta HTML (por ejemplo, div, p) y pseudo-elementos (por ejemplo, ::before, ::after). Aumentan el cuarto dígito (por ejemplo, 0,0,0,1).

Ejemplo de cálculo:

• p - 0,0,0,1
• .mi-clase - 0,0,1,0
• #mi-id - 0,1,0,0
• div p - 0,0,0,2 (suma de las especificidades de dos elementos)
• #mi-id .mi-clase - 0,1,1,0 (suma de la ID y la clase)
• div#mi-id.mi-clase:hover - 0,1,2,1 (suma de la etiqueta, ID, clase y pseudo-clase)

Reglas:

1. La especificidad del estilo en línea siempre es superior a cualquier combinación de otros selectores, excepto reglas con la bandera !important.
2. Las reglas con la bandera !important tienen la prioridad más alta, sobrescribiendo incluso el estilo en línea. No se recomienda usar !important debido a la dificultad para depurar.
3. Cuando la especificidad es igual, se aplica la regla que aparece última en el archivo CSS.
4. El selector universal (*) y :where() tienen una especificidad de 0,0,0,0 y no aumentan la especificidad total.

/*
  Especificidad: 0,0,0,1
  Se aplicará si no hay reglas más específicas
*/
p {
  color: blue;
}

/*
  Especificidad: 0,0,1,0
  Sobrescribirá la regla para la etiqueta p
*/
.text {
  color: green;
}

/*
  Especificidad: 0,1,0,0
  Sobrescribirá la regla para la clase .text
*/
#main-text {
  color: red;
}

/*
  Especificidad: 1,0,0,0
  Se aplicará si el elemento tiene el atributo style="color: purple;"
*/
/* <p style="color: purple;">Texto</p> */

/*
  Especificidad muy alta, sobrescribirá todo
  No se recomienda usar sin necesidad extrema
*/
.override-text {
  color: black !important;
}