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

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

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.

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

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.

__

Si escriben ! se va agregar toda la estructura básica 😃

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

jerarquia de la importancia en css
!important = 10000
estilos en linea = 1000
#id =100
.clases= 10
psrudo clases y pseudoelementos =10
selectot univeral = 0

Una práctica para entender mejor la especificidad, seguramente a alguno le servirá 😎.
.

Dejo aquí mis apuntes en PDF hechos con Notion:
https://drive.google.com/file/d/19bMxxs6e9IbITrtPKaIkWxTIzU2jLy4o/view?usp=sharing

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

Les dejo un pequeño aporte…

La especifidad
Es como el navegador va a mostrar el CSS de acuerdo a que tan especifico es el selector que creaste.

Especifidad > Cascada

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/

Buscando sobre este tema, encontré estos quizes sobre especifidad en CSS:

Specificity Wars
Can You Count Specificity?

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una declaración directa, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.

Y les dejo este link, quizá le sirva a alguien:)
https://developer.mozilla.org/es/docs/Web/CSS/Specificity

para reflejar el grado de specificity que tiene tu codigo,
en la medida que es mas plano tu grafico mucho mejor,

https://jonassebastianohlsson.com/specificity-graph/

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

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

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.

# Explicación ejemplo ## Primero ```css #id h1::first-letter ``` - **#id** : id = 100 - **h1** : Elemento = 1 - **::first-letter** : Pseudoelemento = 1 **SUMA TOTAL : 102** --- ## Segundo ```css p .sidemenu div:hover ``` - **p** : Elemento = 1 - **.sidemenu** : Clase = 10 - **div** : Elemento = 1 - **:hover** : Pseudoclase = 10 **SUMA TOTAL = 22**

nos hace el color azul porque como dice que es en cascada osea que lo que va bajando es lo que se va quedadando

Visual Studio Code nos permite saber la especificidad de nuestras reglas CSS

Clase 10 - Cascada y especificidad en CSS

¿Qué es la cascada en CSS?

• Es el concepto que determina qué estilos se sobre escriben de un elemento. Cómo su nombre lo indica los estilos en CSS se aplican en cascada, es decir, que los estilos que escribamos debajo de un mismo estilo y elemento se priorizará el que está de últimas.

¿Qué es la especificidad?

• Es la forma en CSS y el navegador le dan un valor al selector que usemos para aplicar estilos a un elemento HTML, esto sin importar el lugar en donde escribamos nuestro código.

¿Cuáles son los valores que tienen los selectores para poder aplicar la especificidad?

• !important = 10000.
• Estilos en línea. = 1000.
• Atributo id = 100.
• Clases, atributos y pseudoclases = 10.
• Elementos (etiquetas) y pseudoelementos = 1.
• Selector universal = 0.

.

Un cuento/historia es una forma sublime de enseñar algo complicado (cuando se está aprendiendo) 🤩

hice esta página para practicar lo aprendido y también investigué un poco.

Esta clase es muy importante por que no lo encontre en el curso definitivo de HTML y CSS.

![](

En mi opinión prevalece el color blue porque es la última linea escrita

El orden de los selectores si altera el producto!

p::first-line {

color: red;
}

FALLE era # Team Rojo

#TEAM RED

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

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

Espesificidad de los selectores

la cascada funciona siempre y cuando la especificidad sobre el elemento sea la misma y se impondra la que este de ultima.
La especificidad es la manera en que el navegador decide que valores de una propiedad son los mas relevantes para el elemento y por lo tanto seran aplicados tiene sus reglas de jerarquia compuesta por los

• !import
• estilos de linea
• #id
• clase, atributos, y pseudoelementos
• Elementos y pseudoelementos
• selector universal

!import es la mas importante y le gana a todos los estilos – no es buena practica

El !impotant y el #ID son consideradas malas practicas se recomienda es usa .class y elements .

Dolores de cabeza con este tema, y ya quedó aclarado

Va a prevalecer el ID frente a la clase, porque tiene un valor mayor de especificidad.

Se mostraría el ‘Blue’ porque es el ultimo que se escribió, y como en CSS importa el orden porque funciona en cascada, predominaría el ‘Blue’.

❓ Una pregunta interesante¿cual tiene mayor predominancia, la cascada o la especificidad?
✨👉🏻Cuando se trata de resolver conflictos entre reglas CSS que afectan al mismo elemento, la especificidad es lo que prevalece. Las reglas con una mayor especificidad tendrán prioridad sobre las reglas con una menor especificidad, incluso si las reglas con menor especificidad aparecen después en el archivo CSS.

👀 cuando varias reglas de estilo compiten por dar estilo a un elemento, CSS utiliza la especificidad para determinar cuál regla debe aplicarse. Recuerda que a menudo es mejor mantener la especificidad lo más baja posible y evitar el uso excesivo de !important para que tus estilos sean más fáciles de mantener y entender

✅

!important = fuera de concurso

Like si te gusta el nombre de CSS, me encana el logo

Aquí en CSS, sí importa la posición: “Los últimos serán los primeros.” 😃

Mi resumen

| Tipo de Selector | Puntos |
| --- | --- |
| !important | 10000 |
| Estilos en Línea | 1000 |
| ID Selector | 100 |
| Clases, atributos y Psedoclases. | 10 |
| Elementos y Pseudoelementos | 1 |
| Selector Universal | 0 |

!Important: es le indicas el valor de la importancia del atributo -Estilo en línea -ID -Clases, atributos y pseudoclases -Selector universal

Hola
El h1 va a salir en nuestra página web de color azul, ya que CSS reescribió el color, dijo mmm primero vas a ser rojo y luego dijo oh no eres azul

El del id

Sale de color azul.

Explicación ejemplo

Creo que es así:

Primero

#id h1::first-letter

• #id : id = 100
• h1 : Elemento = 1
• ::first-letter : Pseudoelemento = 1

SUMA TOTAL : 102

Segundo

p .sidemenu div:hover

• p : Elemento = 1
• .sidemenu : Clase = 10
• div : Elemento = 1
• :hover : Pseudoclase = 10

SUMA TOTAL = 22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Especificidad</title>
    <style> 
        #platzi {
            color: red;            
        }
        .master {
            color: springgreen;
        } 
    </style>
</head>
<body>
    <div id="platzi" class="master">Platzi</div>
</body>
</html>

• La cascada y la especificidad son dos conceptos fundamentales en CSS que determinan cómo se resuelven los conflictos y se aplican los estilos cuando hay reglas CSS que se solapan o compiten entre sí. Aquí tienes una descripción de cada uno:

• Cascada (Cascade):

🎈La cascada se refiere al proceso de determinar qué reglas de estilo se aplican a un elemento cuando hay múltiples reglas que se aplican a ese elemento.
🎈Las reglas de estilo se aplican en función de su importancia y su especificidad, así como del orden en que aparecen en el código CSS.
🎈Las reglas de estilo más específicas tienen más peso y sobrescriben las reglas menos específicas.
🎈Si hay conflictos entre reglas de igual especificidad, se utiliza la regla que aparece más abajo en el código CSS.

• Especificidad (Specificity):

🎈La especificidad es un valor que se asigna a una regla de estilo y determina qué tan específica es en relación con otras reglas.
🎈Se mide en términos de selectores utilizados en una regla de estilo y su peso relativo.
🎈Los selectores tienen diferentes valores de especificidad. Por ejemplo, los selectores de ID tienen una mayor especificidad que los selectores de clase o de etiqueta.
🎈La especificidad se representa en una secuencia de cuatro valores (a, b, c, d) conocidos como la especificidad en términos de peso. Cuanto mayor sea el valor de a, b, c o d, mayor será la especificidad de la regla.
🎈Por ejemplo, la regla h1 tiene una especificidad de (0, 0, 0, 1), mientras que la regla .clase tiene una especificidad de (0, 0, 1, 0) y la regla #id tiene una especificidad de (0, 1, 0, 0).
🎈Si hay conflictos entre reglas de igual cascada, se utiliza la regla con la especificidad más alta.
🎈Es importante entender cómo funciona la cascada y la especificidad para evitar conflictos y asegurarse de que los estilos se apliquen correctamente. Al escribir CSS, es útil seguir buenas prácticas y utilizar selectores específicos y estructurar el código de manera que sea fácil de mantener y evitar problemas de cascada no deseada.

quedaria azul

cascada y espedificidad en CSS X0000 | !important X000 | Estilos en linea X00 | #id X0 | Clases,atributos y pseudoclases X | elementos y pseudoelementos 0 | selecto universal

Calculadora para medir especificidad del codigo en css

El color más abajo sobrescribe

segun yo el h1 quedaria azul

https://specificity.keegan.st/

Ahora entiendo el meme de !important en Css

Es esta página pueden ver más sobre especificidad en css

• pueden instalar una calculador de especifidad con el siguiente comando:

npm install specificity

La cascada en CSS es el proceso que sigue el navegador para determinar qué estilos aplicar a un elemento cuando hay múltiples reglas de estilo que podrían afectarlo. La cascada se basa en tres criterios principales: importancia, especificidad y orden de origen.

I IMPORTANCIA

Las reglas de estilo pueden provenir de diferentes fuentes segun su importancia:

• !important
• Estilos en línea
• Hojas de estilo internas
• Hojas de estilo externas
• Estilos predeterminados del navegador

1. !important

Puedes utilizar la declaración !important en una regla CSS para aumentar su prioridad y asegurarte de que se aplique incluso si hay otros estilos en conflicto. Sin embargo, el uso excesivo de !important se considera una mala práctica y puede dificultar la depuración y el mantenimiento del código.

2. Estilos en línea:

Estos estilos se aplican directamente a un elemento HTML utilizando el atributo style. Los estilos en línea tienen la prioridad más alta en la cascada y generalmente se utilizan para casos específicos en los que se requiere un estilo único para un elemento. Por ejemplo:

<p style="color: blue; font-size: 16px;">Este es un párrafo con estilos en línea.</p>

3. Hojas de estilo internas:

Las hojas de estilo internas se definen dentro de un documento HTML utilizando la etiqueta <style> en la sección <head>. Estos estilos tienen una prioridad más baja que los estilos en línea pero mayor que las hojas de estilo externas y los estilos predeterminados del navegador. Por ejemplo:

<!DOCTYPE html>
<html>
<head>
  <style>
    **p {
      color: red;
      font-size: 18px;
    }**
  </style>
</head>
<body>
  <p>Este es un párrafo con estilos de una hoja de estilo interna.</p>
</body>
</html>

4. Hojas de estilo externas:

Las hojas de estilo externas son archivos separados con extensión .css que contienen reglas de estilo. Estos archivos se enlazan a un documento HTML utilizando la etiqueta <link> en la sección <head>. Las hojas de estilo externas tienen una prioridad más baja que los estilos en línea e internos pero mayor que los estilos predeterminados del navegador. Por ejemplo:

Archivo estilos.css:

cssCopy code
p {
  color: green;
  font-size: 20px;
}

Archivo index.html:

htmlCopy code
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <p>Este es un párrafo con estilos de una hoja de estilo externa.</p>
</body>
</html>

5. Estilos predeterminados del navegador:

Los navegadores tienen un conjunto de estilos CSS predeterminados que se aplican a los elementos HTML si no se especifica ningún otro estilo. Estos estilos varían ligeramente entre los navegadores y tienen la prioridad más baja en la cascada.

II ESPECIFICIDAD

Si varias reglas tienen la misma importancia, la especificidad ayuda a determinar cuál se aplicará. La especificidad se calcula en función de los selectores utilizados en las reglas CSS. Los selectores se pueden clasificar del mas especifico al menos especifico:

a. ID selectors (#)
b. Class selectors, attribute selectors y pseudo-classes ( . )
c. Element selectors y pseudo-elements (h p [href] )

D. Selector universal (*)

La especificidad se representa como una serie de tres números (a, b, c), donde cada número corresponde a la cantidad de selectores en cada categoría. Por ejemplo, si una regla tiene:

• 1 ID selector, 2 class selectors y 1 element selector

• Su especificidad será (1, 2, 1).

• La regla con la especificidad más alta se aplicará en caso de conflicto.

• Ejemplo -Evaluacion de especificidad

  Supongamos que tienes un documento HTML con un párrafo que tiene una clase .destacado y un ID #resaltado. Ahora, imaginemos que tienes dos declaraciones CSS que intentan cambiar el color del texto de este párrafo:

  
  <!DOCTYPE html>
  <html>
  <head>
  <style>
    .destacado {
      color: blue;
    }
  
    #resaltado {
      color: red;
    }
  </style>
  </head>
  <body>
  
  <p class="destacado" id="resaltado">Este es un párrafo con clase "destacado" e ID "resaltado".</p>
  
  </body>
  </html>
  
  

  En este caso, ambas declaraciones CSS tienen la misma importancia, ya que ambas son parte de la misma hoja de estilo interna. Ahora, debemos evaluar la especificidad de cada una:

  1. La primera declaración .destacado tiene una especificidad de (0, 1, 0), ya que contiene 1 selector de clase y ningún selector de ID ni de elemento.
  2. La segunda declaración #resaltado tiene una especificidad de (1, 0, 0), ya que contiene 1 selector de ID y ningún selector de clase ni de elemento.

  Dado que la declaración #resaltado tiene una especificidad mayor que la declaración .destacado, el color del texto del párrafo será rojo, ya que la regla con mayor especificidad prevalece en caso de conflicto.

III ORDEN DE ORIGEN

Si las reglas tienen la misma importancia y especificidad, el orden en que se definen determina cuál se aplicará. Por lo general, la regla definida más recientemente en el código tiene prioridad sobre las reglas definidas anteriormente. Sin embargo, si hay múltiples hojas de estilo, también influye el orden en que se enlazan en el documento HTML.

Estefany aparte de enseñar muy bien, de una manera muy detallada, clara y técnica, es bastante linda, muy tierna.

Talvez explicaron cual es mas especifico, pero yo explico el porque, mas especifico se refiere a cual se refiere mas especificamente al elemento, los ID son unicos y por eso son tan especificos, las CLASES no son unicas asi que son menos especificas, y el * o el estilo general no es NADA especifico ya que se refiere a todos, asi que es el que tiene menos importancia para css, y puede ser usado para que todos tengan un estilo hasta que tu mismo decidas cambiar ese estilo, es algo asi como un estilo por defecto que tu colocas (aunque ya no seria por defecto ya que lo colocaste tu mismo pero eso a nadie le importa verdad?).

Nos sale siempre el azul a menos que escribemos !Important

Mis apuntes en Notion💚

Encontré este artículo reciente sobre buenas prácticas en CSS y una de ellas menciona evitar en lo posible la etiqueta !important

La mejor clase hasta el momento para mí…no tenía en cuenta sobre esto de la especificidad y en ocasiones me quitaba horas viendo el porque no aplicaba el estilo que quería a algunos elementos 😅.

Cascada

Al aplicar estilos, se debe tener en cuenta la cascada, que básicamente es que el css se ejecuta de arriba a abajo, entonces los estilos de abajo son los que se sobrescriben de los de arriba y se aplicarían.

Especificidad

La especificidad de los selectores define la importancia de cada estilo en un selector, para concluir cual estilo se va a aplicar.

Los factores que afectan a la especificidad incluyen que selectores se usan y como se llaman, por ejemplo, si hay dos selectores p el que tenga mayor especificidad se va a aplicar

Es más específico el primero por ser un selector de ID

Platzi tomaría el color azul, porque según el orden en que aparece en el código, ese es el último estilo que aplica

Los estilos en línea son los estilos escritos directamente en el HTML (estilos embebidos o inyectados), por medio de la etiqueta <style>, que usa la profesora. Esos estilos se sobreescribirán a los estilos que un documento externo de CSS tenga para los mismos selectores, aunque esté vínculado al HTML.