Especificidad CSS
¿Qué es la especificidad?
Si hay dos o más reglas CSS que apuntan al mismo elemento, el selector con el valor de especificidad más alto "ganará" y su declaración de estilo se aplicará a ese elemento HTML.
Piense en la especificidad como una puntuación/rango que determina qué declaración de estilo se aplica en última instancia a un elemento.
Mira los siguientes ejemplos:
Ejemplo 1
En este ejemplo, hemos utilizado el elemento "p" como selector y hemos especificado un color rojo para este elemento. El texto será rojo:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Ahora, mira el ejemplo 2:
Ejemplo 2
En este ejemplo, agregamos un selector de clase (llamado "prueba") y especificamos un color verde para esta clase. El texto ahora será verde (aunque hemos especificado un color rojo para el selector de elementos "p". Esto se debe a que el selector de clase tiene mayor prioridad:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Ahora, mira el ejemplo 3:
Ejemplo 3
En este ejemplo, hemos agregado el selector de ID (llamado "demo"). El texto ahora será azul, porque el selector de id tiene mayor prioridad:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Ahora, mira el ejemplo 4:
Ejemplo 4
En este ejemplo, hemos agregado un estilo en línea para el elemento "p". El texto ahora será rosa, porque el estilo en línea tiene la máxima prioridad:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Jerarquía de especificidad
Cada selector de CSS tiene su lugar en la jerarquía de especificidad.
Hay cuatro categorías que definen el nivel de especificidad de un selector:
- Estilos en línea - Ejemplo: <h1 style="color: pink;">
- ID - Ejemplo: #navbar
- Clases, pseudoclases, selectores de atributos - Ejemplo: .test, :hover, [href]
- Elementos y pseudo-elementos - Ejemplo: h1, :before
¿Cómo calcular la especificidad?
¡Memoriza cómo calcular la especificidad!
Comience en 0, agregue 100 para cada valor de ID, agregue 10 para cada valor de clase (o selector de pseudoclase o atributo), agregue 1 para cada selector de elemento o pseudoelemento.
Nota: El estilo en línea obtiene un valor de especificidad de 1000, ¡y siempre se le da la prioridad más alta!
Nota 2: hay una excepción a esta regla: si usa la !important
regla, ¡incluso anulará los estilos en línea!
La siguiente tabla muestra algunos ejemplos de cómo calcular los valores de especificidad:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
¡El selector con el valor de especificidad más alto ganará y entrará en vigor!
Considere estos tres fragmentos de código:
Ejemplo
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
La especificidad de A es 1 (selector de un elemento)
La especificidad de B es 101 (una referencia de ID + un selector de elemento)
La especificidad de C es 1000 (estilo en línea)
Dado que la tercera regla (C) tiene el valor de especificidad más alto (1000), se aplicará esta declaración de estilo.
Más ejemplos de reglas de especificidad
Especificidad igual: gana la regla más reciente : si la misma regla se escribe dos veces en la hoja de estilo externa, entonces gana la regla más reciente:
Ejemplo
h1 {background-color: yellow;}
h1 {background-color: red;}
Los selectores de ID tienen una mayor especificidad que los selectores de atributos . Mire las siguientes tres líneas de código:
Ejemplo
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
la primera regla es más específica que las otras dos y, por lo tanto, se aplicará.
Los selectores contextuales son más específicos que un selector de un solo elemento: la hoja de estilo incrustada está más cerca del elemento al que se va a aplicar estilo. Entonces en la siguiente situación
Ejemplo
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
se aplicará esta última regla.
Un selector de clase supera a cualquier número de selectores de elementos : un selector de clase como .intro supera a h1, p, div, etc.:
Ejemplo
.intro {background-color: yellow;}
h1 {background-color:
red;}
El selector universal (*) y los valores heredados tienen una especificidad de 0 - ¡El selector universal (*) y los valores heredados se ignoran!