Cascada y especificidad en CSS

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

Stylesheets cascade

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á.

Especificidad

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.

https://www.youtube.com/watch?v=v5GxoV14YOE

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:

• Estilos inline (en línea) → 1,0,0,0
• Ids → 0,1,0,0
• Clases, atributos y pseudoclases → 0,0,1,0
• Etiquetas y pseudoelementos → 0,0,0,1
• Si indicamos la especificidad de !important GANA SIEMPRE Y NO SE USA NUNCA pero si se aplica esta especificidad indicaras que no has entendido la especificidad de CSS. Por lo que se recomienda usar clases en los estilos de CSS.

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

Código

<!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

![](

En WebStorm aparece la especificidad cuando pasamos el cursor sobre el selector:

Ya lo escribí y saldría de color blue.
.
Es como en javascript, a medida que va leyendo el codigo lo va ejecutando, por lo tanto en caso de estas coincidencias, prevalecerá la ultima instrucción que se haya escrito.

El ID es más específico que el de la clase

por especificidad creo que quedara el color rojo…

profe lo practique y si me cambio de color…
h3 {
color: aqua;
background: black;
}
h3 {
color: red;
background: yellowgreen;
}

Resumen en Notiion
https://n9.cl/4lap1

Como calcular la especificidad

https://www.w3schools.com/css/css_specificity.asp

Por fin comprendo mejor este tema; desconocía specificity calculator.

Si quieren aprender a calcular la especificidad pasen a ver este video, mejor explicado imposible:

https://www.youtube.com/watch?v=nBzVvBxTQPU

Nunca paren de aprender.

Ojala me lo hubieran explicado asi en la universidad,me ahorraba muchas cosas.

Que chimba

El color seria: blue, por que css interpreta lo ultimo que escribamos, osea tiene mas importancia lo ultimo que lo primero

En este caso aparecerá de color azul, ya que al tener declaraciones de la misma importancia prevalece el declarado en último lugar.

id

COLOR BLUE.

Seria de color azul puesto que CSS implementa el estilo que fue el ultimo en declararse.

Notes:

• CSS → Cascading Style Sheet
• En CSS el orden de las reglas SI IMPORTA! y precisamente se toma en manera de cascada
• La especificidad de los selectores es la manera en que CSS lidia con los conflictos de estilo que puedan llegar a ocurrir en un elemento (en otras palabras, cuando no sabe que estilo debe aplicar)
• el !IMPORTANT es el atributo que mayor especificidad tiene
• El selector universal es quien menos especificidad tiene
• Las pseudoclases tienen el mismo peso que las clases ******y los pseudoelementos tienen el mismo peso que los elementos

saldria de color azul ya que es el ultimo que se indicó

En orden de especificidad vendrían entonces:
1-Important!
2–estilos en línea
3—IDs
4----clases o pseudoclases
5-----elementos o pseudoelementos
6------selector universal

Muy importante realizar ejercicios para aclarar conceptos y comprender mejor la especificidad

que buena clase no sabia eso de especificidad, solo ponia !important

Al aplicar 2 reglas de igual especificidad, la última en el CSS es la que se interpretará.

Esta muy buena esa pagina, la verdad no me imaginaba haciendo una infinidad de cálculos mentales.
https://specificity.keegan.st/
Gracias.

El h1 aparece azul.

color azul! 😄

en caso de que haya un empate en la especificidad, entonces, se aplica el estilo del selector que este mas abajo en el codigo css. en el siguiente ejemplo se usa el selector de clase .caja y el selector de atributo [href] los cuales tienen el mismo valor de especificidad que es 10 por lo que hay un empate de especificidad, en estos casos css aplica el estilo del selector que este mas abajo en el codigo, osea, en este caso se aplica el estilo del selector [href].

.caja{
color: blue;
}

[href] {/*selecciona todos los elmentos que tengan el atributo href*/
color: aqua;
}

Blue

Especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

Primer grupo (derecha a izquierda)

Segundo grupo (derecha a izquierda)

Tercer grupo (derecha a izquierda)

Cuarto grupo (derecha a izquierda) (no recomendado)

Quinto grupo (no recomendado)

Entendiendo la especificidad de CSS

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

https://specificity.keegan.st/

supongo que es el color azul el que predomina