En Vscode podemos ver la especificidad de nuestros elementos colocando el cursor sobre el nombre del selector.
Introducción al desarrollo frontend
Inicia tu camino como frontend developer
¿Qué es HTML y CSS? ¿Para qué sirven?
Motores de render: de archivos a píxeles
Quiz: Introducción al desarrollo frontend
Maquetación con HTML
Anatomía de un documento HTML y sus elementos
¿Qué es HTML semántico?
Etiquetas de HTML más usadas
Maquetación con CSS
Anatomía de una declaración CSS: selectores, propiedades y valores
Tipos de selectores: básicos y combinadores
Tipos de selectores: pseudoclases y pseudoelementos
Cascada y especificidad en CSS
Tipos de display más usados: block, inline e inline-block
Tipos de display más usados: flexbox y CSS grid
Modelo de caja
Colapso de márgenes
Posicionamiento en CSS
Z-index y el contexto de apilamiento
Propiedades y valores de CSS más usados
Diseño responsivo
Unidades de medida
Responsive Design
Quiz: Diseño responsivo
Arquitecturas en CSS
¿Qué son las arquitecturas CSS? ¿Para qué sirven?
OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Quiz: Arquitecturas en CSS
Próximos pasos
CSS para entrevistas y mundo laboral
Continúa con el Curso Práctico de Frontend Developer
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 157
Preguntas 19
En Vscode podemos ver la especificidad de nuestros elementos colocando el cursor sobre el nombre del selector.
Entender especificidad es muy importante, sobre todo porque suele pasarnos que escribimos algún estilo y vemos que por alguna razón no se aplica. Esto es muy normal que pase y acabamos poniéndole un !important
(que por cierto, es mala práctica usar !important
👀).
.
¡Lo genial de esto es que es tan fácil como hacer una suma! Muchas personas suelen confundirse con este tema, pero tú ahora ya sabes cómo funciona 😉. Básicamente, CSS acabará aplicándole los estilos al selector que sea más específico, y podemos determinar su especificidad simplemente haciendo una suma… ¡como un juego de puntos! 😄.
.
La próxima vez que tengas un problema de que tus estilos no se están aplicando (o que en el inspector de elementos te salen tachados) recuerda que probablemente puede ser un problema de especificidad. ¡Y ten siempre esta tablita a la mano!
.
https://specificity.keegan.st/
Link de la pagina
A un nivel muy simple, esto significa que el orden de las reglas CSS importa; cuando se aplican dos reglas que tienen igual especificidad, la que viene en último lugar en el CSS es la que se utilizará.
La especificidad es el medio por el que los navegadores deciden qué valores de propiedades CSS son los más relevantes para un elemento y, por tanto, se aplicarán. La especificidad se basa en las reglas de concordancia que se componen de diferentes tipos de selectores CSS.
La cantidad de especificidad que tiene un selector se mide utilizando cuatro valores diferentes (o componentes), que se pueden considerar como miles, cientos, decenas y unos
Miles
Puntúa uno en esta columna si la declaración está dentro de un atributo style, también conocido como estilos en línea. Estas declaraciones no tienen selectores, por lo que su especificidad es siempre 1000.
Cientos
Puntúa uno en esta columna por cada selector de ID contenido dentro del selector general.
Decenas
Puntúa uno en esta columna por cada selector de clase, selector de atributos o pseudoclase que contenga el selector general.
Unos
Puntúa uno en esta columna por cada selector de elemento o pseudo-elemento contenido dentro del selector general.
!important
cambia la forma en que la cascada funciona normalmente, por lo que puede hacer que la depuración de los problemas de CSS sea realmente difícil de resolver, especialmente en una hoja de estilos grande.
No lo uses si puedes evitarlo.
La única manera de anular esta declaración !important
sería incluir otra declaración !important en una declaración con la misma especificidad más adelante en el orden de las fuentes, o una con mayor especificidad.
Consejo importante: 👉 Aprendanse a calcular la especificidad a pleno.
.
No es un chiste, NO ES UN MEME
.
Les va a ahorrar un monton de tiempo, de repente puede pasar que un estilo no les va a funcionar y no van a saber por qué, y por más que intenten no hay caso. En la mayoria de los casos, suele ser un problema de especificidad
Creo que inconscientemente la profe eligió el color azul ya que prefiere seguir al conejo hasta el País de las Maravillas y con esto hacernos tomar el curso de animaciones con CSS donde se ven en práctica todo este tema de la especificidad y selectores… Eso o necesito dormir xD
Hola, para aportar a lo dicho sobre especificidad les dejo los imagen y un vídeo
De igual manera es importante resaltar que el important! es una mala practica, ademas de siempre intentar implementar los estilos por sus clases o id, lo cual hara nuestro codigo de html mas limpio.
Si escriben ! se va agregar toda la estructura básica 😃
Wow, llevo ya bastante prácticas con CSS (nada 100% profesional) e incluso he hecho proyectos enteros escolares con CSS puro y no tenía ni idea de la existencia de la especificidad, ni si quiera había visto alguna mención de esto en ningún lado, siento que he descubierto un secreto muy oculto de CSS pero realmente parece que es un aspecto muy básico jajaj XD.
Estaba por saltarme este curso pues creía que sabía lo esencial de HTML y CSS pero esto me hace ver que siempre hay algo nuevo por aprender.
Usar !important es como usar div en cualesquier lugar del HTML. Son malas prácticas y pueden poner en evidencia una escasa comprensión del lenguaje.
__
jerarquia de la importancia en css
!important = 10000
estilos en linea = 1000
#id =100
.clases= 10
psrudo clases y pseudoelementos =10
selectot univeral = 0
Tiene importancia el orden en el que colocas las clases en la etiqueta HTML?
He estado haciendo pruebas y cuando tengo dos bloques de codigo en css el que prevalece no es el ultimo en CSS, sino el la primera clase definida en la etiqueta HTML
.
Aquí está mi codigo
.
En la etiqueta <p> tengo primero la class=“dos” y despues la class=“uno”.
.
En mi CSS tengo los dos bloques de codigo, primero tengo el que hace referencia a mi class .dos y despues tengo el que hace referencia a mi class .uno
.
.
Por la clase, habia entendido que el navegador le daria mayor prioridad al segundo bloque de codigo en mi CSS porque es el ultimo, pero lo que me encuentro es que le da prioridad al primero y solo se me ocurre una razon: El orden en el que se definen las clases en la etiqueta HTML es importante. Este es mi resultado
.
.
Ahora, para terminar de validar el experimento, en mi caso yo tengo dos clases en la misma etiqueta y veo que la mayor prioridad la tiene la primera clase que se definió, esto contradice lo que vi en la clase que nos dice que la mayor prioridad la tiene el ultimo bloque en CSS.
.
Pero ¿Qué pasa si no tenemos dos clases en la misma etiqueta sino una clase en cada etiqueta? ¿Cuál se lleva la prioridad en este caso?
.
Ahora hice 1 sola clase, pero en CSS hice dos bloques con instrucciones diferentes, tienen la misma especificad y obviamente el mismo orden en que la clase fue definida en HTML… ¿Cuál prevalece?
.
.
En este caso, si prevalece el ultimo bloque de codigo en CSS.
.
.
CONCLUSION
.
Si la especifidad es la misma, el navegador le dará prioridad al bloque de CSS que haga referencia a la primera clase definidad en esa etiqueta (esto es para los casos donde una etiqueta tenga más de una clase o ID y tengan instrucciones de CSS diferentes).
.
Si la especificidad es la misma y el orden en que se definió la clase o ID es el mismo, prevalecerá el ultimo bloque de codigo de CSS
Dejo aquí mis apuntes en PDF hechos con Notion:
https://drive.google.com/file/d/19bMxxs6e9IbITrtPKaIkWxTIzU2jLy4o/view?usp=sharing
La especifidad
Es como el navegador va a mostrar el CSS de acuerdo a que tan especifico es el selector que creaste.
Especifidad > Cascada
Dos temas muy importantes, ya que esto básicamente nos ayudara a comprender cuál es la importancia o el peso que tenga cada uno de esos selectores o el orden (cascada) en el que CSS lee la información de nuestro archivo a la hora de aplicar los estilos a nuestro documento HTML.
.
Cascada: En CSS las reglas que se escriben en la parte de abajo van a sobreescribir las reglas que están en la parte de arriba.
.
Especificidad: Los tipos de selectores importan mucho, ya que el peso que tenga o el valor que se le dé a ese selector, es el que va a prevalecer por encima de los demás.
Yo creyendo que sabia lo suficiente de CSS y Estefany llega con la especificidad y la predominancia con el ejemplo de los colores.
QUE CLASE DE BRUJERÍA ES ESTA!
😱😱😱
Especificidad: establece cómo de específico es un selector para saber qué estilo aplicar. El cálculo se realiza con la siguiente fórmula, por orden de prioridad:
Aquí facilito un enlace de un video explicativo de este tema para aclarar la teoría:
https://www.youtube.com/watch?v=6fh7ZTj2t2k
y una web que también verifica nuestro css mediante un gráfico:
https://jonassebastianohlsson.com/specificity-graph/
Para que lo tengan en algun lado de su html y no se olviden
<!–
x 0 0 0 0 , !important
x 0 0 0 , estilos en linea
x 0 0 , #id
x 0 , clases, atributos y pseudoclases
x , elementos y pseudoelementos
0 , selector universal
–>
El orden de los selectores si altera el producto!
p::first-line {
color: red;
}
FALLE era # Team Rojo
#TEAM RED
Recuerden si tienes dos selectores con la misma especificidad sobre un elemento, el siguiente criterio que toma el navegador es el orden en cascada es decir elegirá la ultima regla css
https://specificity.keegan.st/
Link de especificidad
Yo creó que al ser un estilo en cascada tendrá en cuenta el último, es decir; blue.
Yo creo que sale de color azul, lo de abajo sobrescribe lo de arriba.
Las reglas de CSS que tienen menor especificidad son elementos y pseudoclases recuerdalo puede ser util para la vida. : )
NO aparecen los enlacen en el apartado de recursos
nos hace el color azul porque como dice que es en cascada osea que lo que va bajando es lo que se va quedadando
Para la pregunta de Estefany, con respecto al H1, creo que por la cascada que nos explica, el H1 tomaría el color blue, al ser el último que se escribió para darle color a ese H!.
tomara el color azul debido que es el ultimo que se escribio en el codigo
Tomara el ultimo h1 que se configura en css, ya que es el ultimo cambio que registra.
Es muy interesante la forma en que podemos aprender cosas importantes a partir de nuestros errores.
No he notado que se haya mencionado (aunque tal vez sí) la importancia de usar las mayúsculas en palabras tales como elementos, selectores o pseudoclases, cosa que seguro va ligada a “Las buenas prácticas”, pero pude notar al cometer esos errores que VSCode sí nota esas diferencias, y por lo tanto es importante recordar las palabras en body y style de la misma manera.
tomara el ultimo que se configure ya que como el orden importa eligira la ultima modificacion y no la primera.
Documentación para especificidad: developer.mozilla
-
Nos sale un color azul
El h1 terminaría siendo de color azul… Aunque, si pones un important! sea cual sea la ubicación de ese valor resulta con el valor del important. Ten cuidado, no es una buena práctica, pero te puede sacar de un aprieto conocerlo.
gana ID
jajaja no se porque esas notas a mano me gustan mucho!
Práctico y muy usual.
Corazon si tu sueles trabajar +70% con clases
Acerteeeeeeee, abajo se subscribe!! 😄
Color rojo
haha
Cálculo de la especificidad.
Cómo saber la mayor especificidad.
Me gusta cómo explica 😄
De color Azul
Poco a poco aprendiendo… em costó internalizar esta clase de especificidad pero ya siento que la manejo… ánimo y siguen adelante
El blue es el que prevalece.
Bajo la premisa de “cascada” yo creo que sale de color rojo entendiendo que primero iría como el inicio de la cascada y iría bajando partiendo de este punto
Interesante la clase, muchas gracias 😃
Chicos recuerden que si usas Vscode, cuando pasas el mouse sobre los selectores te dice que especificidad tiene:
😀 Les recomiendo dos extensiones de VSCOde super ligeras y útiles para trabajar con CSS y preprocesadores a mano.
La primera enlaza directamente los archivos HTML con los archivos CSS para que se autocomplete de forma más fácil.
La segunda te añade una opción al menú contextual para ir directamente de un selector de CSS a su ubicación en el documento HTML y viceversa.
A ver de que color queda la etiqueta p
con estos estilos (no vale copiar y pegar el código para averiguarlo XD):
CSS
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Especificidad</title>
<style>
*{
color: blue;
font-weight: bold;
}
p{
color: chocolate;
}
.class_parrafo{
color: aqua;
}
#id_parrafo{
color: blueviolet;
}
p{
color: red !important;
}
p{
color: yellow !important;
}
</style>
</head>
<body>
<h1>Titulo</h1>
<p id="id_parrafo" class="class_parrafo" style="color: chartreuse;">Parrafo </p>
</body>
</html>
El h1 saldrá de color azul ya que azul es el ultimo valor asignado a la propiedad color
color azul

Segundo grupo (derecha a izquierda)
Tercer grupo (derecha a izquierda)
Cuarto grupo (derecha a izquierda) (no recomendado)
Quinto grupo (no recomendado)
Hace poco en mi trabajo estaba resolviendo errores de visualizacion, debido a que un elemento no cambiaba su color se hiciera lo que se hiciera, resulta que el error erradicaba en que habian colocado el codigo erroneo justo al final de la hoja de estilo, y la solucion tan sencilla era recordar las bases de escribir css correctamente, osea organizadamente, ya que el orden importa, y mucho
blue porque lo la ultima lectura que hace es la que termina colocando
supongo que es el color azul el que predomina
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.