Muchas personas encuentran complejo CSS. Se les ocurren varias excusas: la falta de la capacidad de comprender CSS o CSS es malo en sí mismo. Pero la realidad es que las personas simplemente no encontraron el tiempo para estudiarlo realmente. Si estás leyendo este artículo, estás interesado en aprender CSS y ¡es genial!
¿Qué es la especificidad CSS?
¿Alguna vez ha escrito un estilo, pero no funciona, luego agrega
? Importante (o no), y aún así no funciona? ¿Entonces miras Devtools y te das cuenta de que otro estilo se superpone al tuyo en alguna parte?
Esta es la especificidad de CSS! Así es como el navegador selecciona cuál de los selectores competidores se aplicará al elemento. Cuando el navegador ve que dos o más selectores coinciden con el mismo elemento, y los selectores tienen reglas en conflicto, necesita una forma de averiguar cuál de las reglas se aplicará a este elemento. La forma en que esto sucede se llama el "valor de especificidad CSS".
Antes de profundizar en la especificidad CSS, recuerde estas cosas:- La especificidad de CSS solo es importante cuando varios selectores afectan el mismo elemento. El navegador necesita una forma de averiguar qué estilo aplicar al elemento correspondiente cuando existen valores de propiedad en conflicto.
- Cuando dos o más selectores coincidentes tienen el mismo valor de especificidad (peso), el navegador selecciona el selector coincidente "más reciente" que aparece más cerca de la parte inferior de la lista de selectores coincidentes. El siguiente párrafo explica qué es una "lista de selectores adecuados".
- El navegador crea una "lista de selectores adecuados" combinando todos los estilos en la página web y filtrando aquellos que no coinciden con el elemento "actualmente en diseño " . Los primeros selectores en la hoja de estilo están en la parte superior de la lista, y los últimos selectores están en la parte inferior.
- La propiedad de estilo de un elemento tiene un valor de especificidad mayor que los selectores en las hojas de estilo, a menos que exista ! Importante en el selector de hojas de estilo.
- El uso de ! Importante (que se considera una mala práctica en algunos casos) cambia la especificidad del selector. Cuando dos selectores tienen la misma especificidad, gana el selector con ! Importante . ¡Y cuando ambos lo han hecho ! Importante , el selector "más reciente" gana.
Valor de especificidad
Ahora podemos pasar a cómo el navegador determina la especificidad del selector.
La especificidad del selector se puede representar como una cadena de tres dígitos separada por un guión (o lo que sea): "2–4–1". El primer dígito es el número de selectores de ID presentes, el segundo es el número de selectores de clase, atributos y selectores de pseudo-clase, y el tercero es el número de selectores de tipo y pseudo-elemento disponibles. Por ejemplo:
#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0
Definición de lo más "específico"
Para determinar qué selector es más específico, puede comparar cada uno de los tres valores.
Digamos que tiene
1-1-1 y
0-3-0 , como en los últimos dos ejemplos, y necesita determinar cuál tiene la mayor especificidad. Primero compara los últimos valores
1 y
0 , y en este caso
1 gana. Esto significa que por el momento
div.yellow#red tiene un mayor valor de especificidad ... pero no hemos terminado de comparar los valores.
Luego, compare los valores
1 y
3 ,
3 victorias. Actualmente .red.blue.yellow tiene un mayor valor de especificidad.
Finalmente, comparamos los primeros valores,
1 y
0 , y
1 gana, por lo que
div.yellow#red tiene más especificidad que
.red.blue.yellow .
La especificidad CSS del selector proporciona una buena explicación de por qué ningún número de selectores de clase puede anular el selector de ID.
Pequeñas advertencias
3 "trampas" a tener en cuenta:- Escribí anteriormente que el segundo número en una secuencia de números que consta de tres es "el número de selectores de clase, selectores de atributos y pseudo-clases". Esto es cierto en todos los casos, excepto cuando es
:not() pseudoclase. Cuando es :not() pseudoclase, no lo consideramos, sino que simplemente lo ignoramos. Pero los selectores que contiene no se ignoran, se consideran normales. - La especificidad de CSS comprende la "forma" de un selector. Esto significa que cuando tiene
*[id="yellow"] y #yellow , el primero se trata como un selector de atributos. - El selector universal
* solo no cuenta para la especificidad del selector. En el párrafo [id="yellow"] anterior, parte del selector es lo que realmente importa.
Espero que este artículo sea fácil de entender y ayude a comprender qué es la especificidad CSS. Ahora puede ver el estilo y determinar fácilmente qué tan "específico" es.