¿Has construido un proyecto y no sabes por qué no te funcionan correctamente los estilos?seguramente sea un problema de especificidad, y de esto es de lo que hablaremos en este artículo para que puedas superar este problema y saber cómo buscar estos problemas en tu código.
Vamos a ver un ejemplo y nos basaremos en este para entrar en tema, en esto solo hay un párrafo que tiene varios estilos asignados sobre una misma propiedad en CSS, viendo este código ¿cuál crees que sea el resultado?🤔
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Ejemplo de Especificidad en CSS</title>
</head>
<body>
<p class="mi-clase" id="mi-id">Hola, mundo!</p>
</body>
</html>
main.css
p {
color: blue; /* Regla 1 */
}
.mi-clase {
color: red; /* Regla 2 */
}
#mi-id {
color: green; /* Regla 3 */
}
p.mi-clase {
color: purple; /* Regla 4 */
}
Vemos que se ha aplicado la regla 3 que hemos definido en nuestro CSS, recuerda que si sobreescribes un estilo en CSS, tomará el último que hayas escrito, que en nuestro ejemplo debe serlos estilos de la línea 13.
Pues si abrimos este código en el explorador, vamos a ver lo siguiente:
Pero se supone que este texto debería estar en color púrpura, no en verde según hemos sobreescrito los estilos, esto es por la especificidad en CSS.
Esto aplica a una suma de selectores que tenga cada uno de los elementos de nuestro código y cómo definamos los selectores.
¿Qué es la especificidad?
La especificidad son el conjunto de reglas que definen qué estilos serán aplicados a nuestros elementos, y como te mencioné depende de los selectores que le has aplicado en el código CSS para que tomen unos u otros, vamos a ver a qué nos referimos a estos cuando los vemos en las devtools de Chrome si inspeccionamos nuestro elemento <p>:
Aqui vemos algo curioso y es que nos muestra todas las líneas que están asignadas a este elemento de CSS a la derecha, vamos a concentrarnos en esta parte:
Aqui vemos 4 elementos que hemos definido en nuestro CSS para este párrafo, como puedes notar, hay algunas propiedades que se encuentran subrayadas, esto quiere decir que esos estilos están siendo sustituidos, ya que están apuntando a la misma propiedad que es color, nuestro párrafo por supuesto en este ejemplo no puede tener múltiples colores, lo que CSS hará será tomar aquel valor que tenga mayor especificidad. Pero
¿Cómo podemos saber que es específico en CSS y que no?
Aqui hay reglas muy claras sobre qué es específico y que no, vamos con ellas, iremos de menor a mayor especificidad:
- Selector universal (*): estos son los estilos que definimos universalmente para todos los elementos, por ejemplo si usamos este selector para cambiar la propiedad
colorde todos los elementos:
* {
color: chocolate
}
- Elementos y psudoelementos: con esto nos referiremos a las etiquetas de HTML:
p {
color: blue; /* Regla 1 */
}
- Clases, pseudoclases y atributos: que normalmente en CSS llamamos con un «
.» para indicar que el estilo debe aplicarse a un elemento:
.mi-clase {
color: red; /* Regla 2 */
}
- ID, que son aquellos que llamamos con el símbolo de numeral en el código CSS:
#mi-id {
color: green; /* Regla 3 */
}
- Estilos inline o en línea, los cuales asignamos directamente a la etiqueta HTML:
<p class="mi-clase" id="mi-id" style="color: gray">Hola, mundo!</p>
- Important, la cual es una regla que no importa que tantas clases o id’ s tenga el elemento, CSS siempre tomará los estilos que hayamos definido con important:
.mi-clase {
color: grey !important;
}
Ya has visto cómo se definen estos selectores, ahora veamos cuál es una notación en la cual puedes realizar una suma para poder determinar qué estilos se van a aplicar al elemento.
¿Cómo se suma la especificidad?
Aqui tenemos una notación que usaremos y que puedes llegar a ver del cómo se usa la especificidad la cual consta de hasta 5 números, de esta manera: 0,0,0,0,0
Cada uno de estos ceros, representa la sumatoria de los elementos en los que se les haya asignado para poder dar estilos, esto lo vamos a entender enseguida con otra lista viendo en cuanto suman cada uno de estos:
- Selector universal: (0,0,0,0,0)
- Elementos y pseudoelementos: (0,0,0,0,1)
- Clases, pseudoclases y atributos: (0,0,0,1,0)
- ID: (0,0,1,0,0)
- Elementos inline: (0,1,0,0,0)
- Important (1,0,0,0,0)
Entonces esto quiere decir que entre mayor sea el número y más a la izquierda este, es que CSS dará los estilos de esa regla.
Vamos a ver algo, que si tenemos una línea que agregue estilos a una clase seria (0,0,0,1,0), mientras una con un id tendría (0,0,1,0,0), para este caso CSS agregara los estilos correspondientes al id.
Pero vamos a imaginar que tenemos el siguiente ejemplo:
<p class="mi-clase mi-clase2" id="mi-id" >Hola, mundo!</p>
Este elemento tiene 2 clases, así que aplicaremos estos estilos:
.mi-clase.mi-clase2 {
color: red; /* Regla 2 */
}
#mi-id {
color: green; /* Regla 3 */
}
Aqui tendríamos que este elemente tiene una regla en el código CSS para las clases (0,0,0,2,0) esto se suma porque tiene 2 clases, pero para el otro caso, la regla del id este tendría (0,0,1,0,0), que aunque el valor el mayor para las clases que es de 2, sigue siendo menos específico que el único id aunque su valor sea de 1. Eso sí, si la otra regla solo tiene una clase, tomará como regla aquella que tenga mayor número.
Vamos a ver cómo se ve esto en el navegador con nuestro primer ejemplo:
Vas a poder ver esta numeración con las devtools, si haces mover, es decir, si pasas el puntero encima del texto antes de las llaves donde se definen las propiedades CSS, y estas se verán así:
Aqui puedes ver que todas estas reglas tienen su propia especificidad, y la que prevalece de nuevo es la que tiene la clase, pero ahora agregaré un inline y un important para ver que podemos obtener:
<p class="mi-clase mi-clase2" id="mi-id" style="color: gray">Hola, mundo!</p>
Y agregando:
.mi-clase {
color: rgb(224, 15, 154) !important;
}
El resultado es:
Y si vemos todos los estilos, el que ha prevalecido es el que tiene el important
Recuerda que este no es un recurso que debas usar todo el tiempo, pero si lo necesitarás, está disponible.
Para terminar este artículo, debes de tener en cuenta la especificidad y de que entre más elementos sumes a la regla mayor especificidad tendrá y es probable que tengas menos problemas al maquetar tus aplicaciones. Y si quieres aprender mucho más sobre CSS, te dejaremos el curso CSS3: sin fronteras para tomar las bases de CSS e igualmente te dejaremos otros artículos sobre esta tecnología
- Mantente actualizado en CSS | View Transitions | State of CSS 2023
- ¿Cómo se usa el anidado en CSS nativo? | CSS Nesting
- Como centrar un div con CSS
Te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago
O igualmente puedes optar por cada curso de manera individual en Udemy.
Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.
¡Hasta la próxima!, y chao mundo
Deja un comentario