Especifidad de CSS

¿Qué es la especificidad?

Si hay dos o más reglas CSS conflictivas que apuntan al mismo elemento, el navegador seguirá ciertos principios para determinar cuál es la más específica y, por lo tanto, la ganadora.

Considera la especificidad (specificity) como una puntuación/escalafón que puede determinar qué declaraciones de estilo se aplicarán finalmente al elemento.

El selector universal (*) tiene una especificidad baja, mientras que el selector de ID tiene una especificidad alta!

Atención:Esta especificidad es una razón común por la que las reglas CSS no se aplican a ciertos elementos, a pesar de que podría parecer que deberían aplicarse.

Jerarquía de especificidad

Cada selector tiene su posición en la jerarquía de especificidad. Las siguientes cuatro categorías definen el nivel de especificidad de los selectores:

Estilos en línea - Los estilos en línea (inline) se adjuntan directamente al elemento al que se aplica el estilo. Ejemplo: <h1 style="color: #ffffff;">.

ID - El ID es el identificador único del elemento de la página, por ejemplo #navbar.

Clases, atributos y pseudo-clases - Esta categoría incluye .clases, [atributos] y pseudo-clases, por ejemplo: :hover, :focus, etc.

Elementos y pseudo-elementos - Esta categoría incluye nombres de elementos y pseudo-elementos, como h1, div, :before y :after.

¿Cómo calcular la especificidad?

¡Recuerde bien el método de cálculo de la especificidad!

Desde el principio, añada 1000 al atributo style, 100 a cada ID, 10 a cada atributo, clase o pseudo-clase, y 1 a cada nombre de elemento o pseudo-elemento.

Pensar en los siguientes fragmentos de código:

Ejemplo

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Título</h1></div>
  • La especificidad de A es 1 (un elemento)
  • La especificidad de B es 101 (un ID y un elemento)
  • La especificidad de C es 1000 (estilo en línea)

Dado que 1 < 101 < 1000, la tercera regla (C) tiene una especificidad mayor y se aplicará.

Regla de especificidad 1:

En caso de especificidad igual: la regla más reciente es importante - Si se escribe la misma regla dos veces en la hoja de estilo externa, la regla posterior será más cercana al elemento al que se aplica el estilo, por lo que se aplicará:

Ejemplo

h1 {background-color: yellow;}
h1 {background-color: red;}

Prueba por ti mismo

La regla siguiente siempre se aplica.

Regla de especificidad 2:

Los selectores de ID tienen una especificidad mayor que los selectores de atributo - Vea los siguientes tres bloques de código:

Ejemplo

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Prueba por ti mismo

La primera regla es más específica que las otras dos, por lo que se aplicará.

Regla de especificidad 3:

Los selectores de contexto son más específicos que los selectores de elementos individuales - Las hojas de estilo en línea están más cerca del elemento al que se aplica el estilo. Por lo tanto, en los siguientes casos:

Ejemplo

Desde el archivo CSS externo:

#content h1 {background-color: red;}

En el archivo HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

Se aplicará la siguiente regla.

Regla de especificidad 4:

Los selectores de clase derrotarán a cualquier número de selectores de elementos - Selector de clase (como .intro) derrotará a h1, p, div, etc.):

Ejemplo

.intro {background-color: yellow;}
h1 {background-color: red;}

Prueba por ti mismo

Además de esto,El selector universal y los valores heredados tienen 0 - La especificidad de * del universal y los valores heredados es 0. La especificidad de los valores heredados también es 0.