¿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 el 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:
Ahora, mira el ejemplo 2:
Ejemplo 2:
En este ejemplo, agregamos un selector de clase (llamado test) 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:
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:
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:
Jerarquía de especificidad
Cada selector 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:
#navbarClases, pseudo-clases, selectores de atributo - 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 pseudo-elemento.
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 regla
!important, incluso anulará los estilos en línea.
La siguiente tabla muestra algunos ejemplos de cómo calcular los valores de especificidad:
| Selector | Valor de especificidad | Cálculo |
p | 1 | 1 |
p.test | 11 | 1 + 10 |
p#demo | 101 | 1 + 100 |
| 1000 | 1000 | |
#demo | 100 | 100 |
.test | 10 | 10 |
p.test1.test2 | 21 | 1 + 10 + 10 |
#navbar p#demo | 201 | 100 + 1 + 100 |
* | 0 | 0 (el selector universal es ignorado) |
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 elementos) 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 es igual a: la última regla gana - Si la misma regla se escribe dos veces en la hoja de estilo externa, la última regla gana:
Ejemplo:
Los selectores ID tienen una mayor especificidad que los selectores de atributos - Mire las siguientes tres líneas de código:
Ejemplo:
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 embebida está más cerca del elemento al que se va a aplicar estilo. Entonces en la siguiente situación.
Ejemplo:
Desde un archivo CSS externo:
#content h1 {background-color: red;}
En el archivo HTML:
<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:
El selector universal (*) y los valores heredados tienen una especificidad de 0 - Se ignoran el selector universal (*) y los valores heredados.
Resumen
La especificidad en CSS determina qué regla se aplicará a un elemento si hay varias reglas que apuntan a él. La especificidad se calcula sumando valores para elementos, clases, ID y estilos en línea, y el selector con el valor más alto gana. Hay excepciones, como cuando se usa !important o cuando se usan selectores contextuales. Es importante entender la especificidad para evitar conflictos en las reglas CSS.
Traducido con 💚 desde W3Schools.com