Especificidad CSS
Que es la especificidad, cuales son las jerarquías de la especificidad, como calcular la especificidad, cuales son las reglas de la especificidad
¿Que es la especificidad CSS?
Si hay dos o más reglas CSS en conflicto que apuntan a la misma etiqueta, el navegador web sigue algunas reglas para determinar cual es más especifico y por lo tanto prevalece.
La especificidad es como un puntaje/rango que determina que declaraciones de estilo finalmente se aplican a una etiqueta.
El selector universal * tiene baja especificidad, mientras el selector ID tiene alta especificidad.
Nota: La especificidad es una razón común de porque algunas reglas CSS no aplican a algunos a algunas etiquetas, aunque crees que deberían funcionar.
Jerarquía de Especificidad CSS
Cada selector tiene su lugar en la jerarquía de especificidad. Hay cuatro categorías el cual define el nivel especificidad de un selector:
| Categoría | Descripción | Ejemplo |
|---|---|---|
| Estilos en línea | Es cuando es adjuntado directamente en la línea el estilo a la etiqueta. | <h1 style=”color: #000000”> |
| ID | Es cuando se da el estilo a través de un ID que es único para la página. | #navegacion { background-color: green; } |
| Clases, atributos y pseudo-clases | Es cuando se da el estilo a través de las clases, de los atributos y de las pseudo-clases. | .elemento { color: black; } |
| Etiquetas y pseudo-elementos | Es cuando se da el estilo a través del nombre de la etiqueta o como pseudo-elemento. | h1 { color: red; } |
Como calcular la especificidad CSS
Comience en 0, agregue los siguientes valores:
| Para estilos en línea | 1000 |
| Por cada ID | 100 |
| Por cada atributo, clase o pseudo-clase | 10 |
| Por cada etiqueta o pseudo-elemento | 1 |
A: h1 { color: yellow; }
B: #contenido h1 { color: blue; }
C: <div id=”contenido”><h1 style=”color: #red;”>Título</h1></div>
- La declaración en A suma 1 (como etiqueta).
- La declaración en B suma 101 (un ID y una etiqueta).
- La declaración en C suma 1000 (por ser un estilo en línea).
Dado que C el mayor nivel de especificidad, entonces será esta la que aplica.
Reglas de Especificidad CSS
Igualdad de especificidad
Si la misma regla es escrita dos veces en la hoja de estilos externa, entonces la regla declarada más abajo en la hoja de estilos y que esta más cerca a la etiqueta a la que se le va a dar el estilo y por lo tanto se aplicara.
En el siguiente ejemplo la última regla será aplicada:
h1 {
background-color: yellow;
}
h1 {
background-color: red;
}
El selector ID tiene una mayor especificidad que el selector de atributos
En el siguiente ejemplo, la primera regla aplicará dado que es más específica que las otras dos:
div#a {
background-color: green;
}
#a {
background-color: yellow;
}
div[id=a] {
background-color: blue;
}
Los selectores contextuales son más específicos que un selector de etiqueta
Los estilos embebidos, es decir, los estilos declarados en el mismo documento HTML declarados dentro de la etiqueta <style> están más cerca de la etiqueta a la que se le va dar el estilo.
En el siguiente ejemplo la última regla es la que va a aplicar:
/* Desde la hoja de estilos externa */
#contenido h1 {
background-color: red;
}
/* En el mismo documento HTML */
<style>
#contenido h1 {
background-color: yellow;
}
</style>
Un selector de clase supera a cualquier número de selectores de etiquetas
Un selector de clase supera a h1, p, div, etc.
En el siguiente ejemplo, la primera declaración es la que se va a aplicar:
.introduccion {background-color: yellow;
}h1 {
background-color: red;
}
El selector universal y valores heredados tienen baja especificidad
La declaraciones *, body *, y similares tienen especificidad de 0. Los valores heredados también tienen especificidad de 0.