Especificidad en selectores

Visual Studio también te ayuda en esto.
Solo tienes que poner el mouse por encima del selector y te dará la especificad

REGLAS DE CASCADA (notas):

Esta pág. me es muy útil pues coloco mi código CSS y puedo monitorear su especificidad, es muy curiosa.
Generador gráfico de especificidad CSS
nota: tocar la pantalla para refrescar.

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)

Fuente Entendiendo la especificidad de CSS

CASCADAS
La cascada se usa cuando hay dos o mas declaraciones que afectan a un elemento, es decir, cuando hay mas de dos reclas que afectan a una etiqueta html, cuando esto ocurre la cascada determinara cual de estas es tiene mayor importancia, y la de mayor importancia sera la que se aplicara. L forma de calcular el peso de una regla no se hace de forma arbitraria, se calculan en base a 3 criterios:

1.- Importancia -----> Las declaraciones importantes son las declaraciones que van seguidas de una directiva llamada: !important. Cualquier otra declaracion sin !important son consideradas declaraciones normales.

2.- Especificidad -----> La regla dice que el selector mas especifico sera el que se tome en cuenta. La forma para calcular la especificidad de un selector se hace con la siguiente formula.

se juntan todos los bloques obtenidos, a mayor numero mayor especificidad, y sera tomado en cuente la regla con mayor especificidad.

3.-Orden ------> Podemos definir los estilos en hojas externas, en la cabecera de la pagina y en la misma etiqueta (estilos en linea), el navegador lee el contenido de una pagina de arriba hacia bajo y los ultimos estilos definidos seran los que se tomaran en cuenta.

Orden de declaración en .css

1. Importancia
2. Especificidad
3. Orden de fuente

Importancia.

1. Hoja de estilo de agente de usuario (Estilos del navegador): primero el navegador va a implementar los estilos que ya trae por defecto

2. Declaraciones normales en hojas de estilo de autor (nuestro .css) que son los estilos que nosotros colocamos en nuestro proyecto.

3. Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Especificidad: el orden de importancia es:

1. !important
2. Iniline styles
3. #id
4. ,class
5. tag

Para evitar rescribir estilos y que se rompa nuestro código tenemos que evitar los !important, Iniline styles #id y tag.

Orden de la fuente: las declaraciones finales son las que se se van a ejecutar en el caso que los estilos tienen la misma especificidad

Como curiosidad y para calcular el “peso” de la especificidad en CSS podemos usar una herramienta como Specificity Calculator

Cuanto más grande sea el número calculado debajo mayor especificidad tendrá la regla.

Aquí un vídeo para reforzar aún mas el concepto de especificidad:
https://www.youtube.com/watch?v=v5GxoV14YOE

Falto mencionar las especificidad de los pseudo-clases y pseudo-elementos:
Pseudo-Clase: (0,1,0)
Pseudo-Elemento: (0,0,1)

Entender especificidad es entender CSS, prácticamente puedes tomarlo como que, mientras más espécífico sea, mayor importancia le dará CSS, y todos los estilos que tu coloques debajo de otros serán reemplazados en dado caso de que tengan la misma especificidad.

Esto es importante, porque por ejemplo, si tu quisieras reemplazar las clases de algún framework podrías hacerlo simplemente colocandop tus estilos DESPUÉS de mandar a llamar al Framework ^^

Para terminar de entender el tema de herencia en CSS es importante también entender el orden de la declaración y la especificidad que tiene CSS.
¿Cómo se controla el orden al declarar CSS?
Aquí se va a mencionar las reglas que aplica CSS y el navegador para poder implementar los estilos.
CSS y el navegador van a tener 3 puntos que son importantes para decidir que estilos se van a implementar

1. Importancia: es uno de los conceptos más, pues, importantes. Si dos declaraciones tienen la misma importancia, la especificidad de las reglas decidirá cuál se debe aplicar. Si las reglas tienen la misma especificidad, el orden de las fuentes controla el resultado final.
   El tema de la importancia el navegador va a cargar los estilos de forma distinta,
   a) Hoja de estilo de agente de usuario (Estilos del navegador). Primero el navegador aplica sus estilos que él tiene para ciertas etiquetas de html.
   b) Declaraciones normales en hojas de estilo de autor (Nuestro.css). Después va como cumplir la declaración de las normas que vengan en nuestros estilos como developers, quiere decir todos los puntos CSS que vamos a generar.
   c) Declaraciones importantes en hojas de estilos de autor (utilizar el ¡important). Por último, va a aplicar los estilos que vengan con un import al final en nuestra hoja de estilos, esto es importante. Tratar de evitar el ¡important, no son buenas prácticas.
2. Especificidad: los números de derecha a izquierda, quiere decir derecha es menos importante e izquierda son muy importantes para el navegador.
   Tenemos que ¡important es el punto mas importante y este no es buena práctica tenemos que evitarlo.
   Después va a tomar en cuenta todos los estilos que vengan en Inline, que son los estilos que se embeben en la etiqueta de html. Está en un punto 4 de importancia, tenemos también que evitarlos.
   Después entran todos los estilos que se le apliquen a los id.
   Después vienen todos los estilos que se le apliquen a las clases.
   Por último, vienen todos los estilos que se le apliquen a selectores como etiquetas de html.
3. Orden en las fuentes: En tus estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto.

Cuando Diego habla sobre cómo carga CSS en el navegador, es algo parecido a esto:

Otro motivo por el cual no veas reflejado el css puede ser el cache de tu navegador.

Consegui esto me parecio interesante compartirlo
https://specifishity.com/

**RELEVANCIA DE ESTILOS
**
REGLA 1: si un estilo definido en la cabecera entra en conflicto con un estilo definido en un archivo externo, se aplican los estilos de aquella definicion que este mas cerca de la etiqueta afectada.

RELA 2: los estilos en linea, al ser aplicados directamente en la etiqueta son los que siempre tienen mayor relevancia.

REGLA 3: la unica excepcion a la regla 1 y 2 es el uso de !important, el cual le indica al navegador que al margen del orden como se han definidos los estilos, el elemento que contenga !important sera el que prevalece.

Un resumen de como se aplican las propiedades en CSS

1. Importancia
2. Origen
3. Especificidad
4. Posición
   
   

📌 La especificidad es la importancia o valor que se le asigna a una declaración CSS.

El problema de especificidad lo encontramos mucho cuando usamos frameworks pues estos tienen sus propios estilos y etiquetas y batallar con estos algunas veces puede tornarse tedioso debido a la herencia. Por eso es importante ser mas especifico que el framework.
Saludos.

Esto lo vi en la clase de soy dalto.

Notas de la clase

Espero les ayude 😃
https://webdesign.tutsplus.com/es/tutorials/what-is-css-specificity--cms-34141

27.-Especificidad en selectores

¿Cómo se controla el orden al declarar CSS?

1. Importancia: Si dos declaraciones tienen la misma importancia entonces la especificidad nos va a decir que regla se aplicará, pero si dos reglas tienen la misma especificidad es el orden el que va a decidir cual es el resultado final.
1. El navegador va a cargar los estilos de forma distinta (primero aplica sus estilos).
2. Después cumple las declaraciones de las normas que vienen en nuestros estilos(todos nuestros CSS).
3. Por último, aplica los estilos que vienen con un “!important” al final en nuestra hoja de estilos. NO PONERLO PORQUE SI. Hay que evitarlo porque no son buenas prácticas.

2. Especificidad: De derecha a izquierda(menos importante a más importantes para el navegador). Si tenemos un conflicto. Por ejemplo: agregamos varios estilos y existe un conflicto de que se rompan los estilos y tenemos una etiqueta de html con una clase tendríamos 0,0,0,1,1 que es más importante que solo la clase; lo mismo con un id con clase

3. Orden en las fuentes (como mandas llamar los estilos o donde colocas el estilo): En los estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto. Es decir, como CSS es como una cascada, los estilos que siempre se van a aplicar son los que estén hasta abajo reescribiendo los de arriba. También aplica en los .css que mandemos llamar.

El algoritmo en cascada le va a dar más importancia al código que esté más abajo, siempre y cuando tenga el mismo nivel de especificidad. Si la especificidad es mayor entonces esa será su prioridad.

Orden es Especificad:
1- !important
2- Inline styles
3- #id
4- .class
5- tag

La Especificidad es uno de los temas más importantes a tomar en cuenta, y es por los que surge muchos inconvenientes a la hora de programar.

En cuanto a la la regla !important , ésta invalida a las demás por orden de jerarquía. Su utilidad es muy específica y concreta en muy pocos casos, lo mejor es no utilizarla ya que se considera una mala práctica.

Esta regla puedes verla utilizada “usualmente” en los CMS como Wordpress a la hora de modificar estilos. Ya que muchas veces no se puede acceder a los estilos básicos de la plantilla y en ese caso se opta por la regla** !important**. Pero si se puede evitar su uso, mucho mejor.

• El orden de la declaración de CSS toma en cuenta la importancia en primer lugar, luego la especificidad y finalmente el orden en las fuentes.
• En importancia, primero toma las fuentes predeterminadas del navegador, luego las hojas normales *.css, y por último las declaraciones !important de los que se realicen en los css.
• La especificidad en lo selectores, toma en cuenta los que tengan la declaración !important, luego los inline style, luego #id, luego .class y finalmente las tag de etiquetas.
• La declaración del orden, se da arriba hacia abajo, es decir los últimos estilos en aplicarse sobreescriben a los primeros. [CalCSS]

Resumen de la clase

![](

![](

Importancia:
1- Hoja de estilo agente de usuario (Estilos del navegador)
2- Declaraciones normales en hojas de estilo de autor (Nuestro.css)
3- Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Orden de las fuentes.
En tus estilos, las declaraciones al final del documento anularan a las que sucedan antes en caso de conflictos.

En este sitio pueden revisar cómo está su CSS respecto a la especificidad: https://jonassebastianohlsson.com/specificity-graph/

El selector universal (*) tiene una especificidad de 0,0,0 lo que significa que no causara conflicto alguno
[](

Uff el tema del orden de las fuentes me habría evitado ciertas frustraciones en clases pasadas jajaja 😦

Importarcia

Especificidad de mayor importancia a menor

Reglas de cascada

Orden de las fuentes

Gracias!

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

No entendí mucho, así que fui a esta página click y me se me facilito porque tenían imágenes.
Espero y les ayude también👍🏻

Maestro Diego:La importancia es uno de los conceptos mas importantes .
Yo: 😮 oh no puede ser , no no entendi.
Maestro Diego: de seguro ahorita no entendiste .
Yo:El maestro es adivino 😮

Estoy investigando para complementar el tema

Importancia > Especificidad > Orden de las fuentes

Importancia

1.- Hoja de estilo de agente de usuario(estilos del navegador)
2.-Declaraciones normales en hojas de estilo de autor (nuestro.css)
3.-Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Important no es un selector señor. Es una regla o una propiedad pero no un selector https://www.w3schools.com/css/css_important.asp

VSCode Nos ayuda a saber la especificidad:

Especificidad en selectores

¿Cómo se controla el orden al declarar CSS?

• Importancia

  • Primero se utiliza los estilos que tiene el navegador
  • Declaraciones normales en hojas de estilo autor(nuestro.css)
  • Declaraciones importantes en hojas de estilos de autor (utilizar el !importa)

  Tenemos que evitar el “!important” porque no son buenas practicas.

• Siempre que tengamos un tag y .class sera mas importante que tener un solo .class

• Y de igual forma siempre una .class y un #id va a ser mas importante que solo un #id

ORDEN DE LAS FUENTES

• En tus estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto. Es decir, si tenemos un clase y la llamamos al principio, pero también al final con otra instrucción, eso puede alterar nuestro código, al igual que la forma en la que se colocan las hojas de css que nuestro html tiene.

Orden

ORDEN AL DECLARAR CSS:

1. Importancia:
1.1. Estilo del navegador
1.2. Nuestro estilo
1.3. !important (reemplaza los estilos que ya hay, tratar de evitarlo)
++2. Especificidad: ++
Reglas de cascada.
2.1. !importan (importancia: 1,0,0,0,0)
2.2. inline styles (importancia: 0,1,0,0,0)
2.3. #id (importancia: 0,0,1,0,0)
2.4. .class (importancia: 0,0,0,1,0)
2.5. tag (importancia: 0,0,0,0,1)
3. Orden en las fuentes

Este tema es muy importante para no frustrarnos con CSS cuando algunos estilos no se aplican como nosotros queremos.

1. Importancia
       a) Hoja de estilo de agente de usuario (estilos del navegador).
       b)Declaraciones normales en hojas de estilo de autor (CSSDocument.css)
       c)Declaraciones importantes en hojas de estilos de autor (utiliza el import !import) Evitarlo

2. Especificidad
   

   
   Nota: Entre más cerca esté el 1 a la izquierda mayor preferencia le dará el navegador

          Nota 2: Tratar de evitar el uso de important e inline style

          Nota 3: Cuando se usa dos o más selectores la especificidad que le dará el navegador web será dada por la suma de los selectores que se usaron (Son valores binarios entre mayor sea este valor mayor especificidad tendrá)
 
3. Orden en las fuentes: Los estilos que se llamen al final sobrescribirán los estilos ya establecidos, es como pintar una casa la última capa de pintura quitará el color de la primera
 

¿Diferente origen o !important?
Si
    Utiliza la declaración con mayor prioridad
No
    ¿Tiene algún inline style?

    Si

        Utiliza las inline declaration

    No

        ¿Los selectores tienen una especificidad diferente?

        Si

            Utiliza las declaraciones con mayor especificidad

        No

            Utiliza las declaraciones que vienen en su fuente

En este caso les comparto esta web, está hermosamente diseñada en CSS, aunque está en inglés me ha ayudado a entender mejor la clase:
https://wattenberger.com/blog/css-cascade

excelente aporte

hola amigos una pregunta, cual es la diferencia entre un ID y un .CLASS

Que bacán enseña el profe de Granda, un genio

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia

nice class!!

GRACIAS

MUY INTERESANTE

💚

Muchisimas gracias!!

Importancia: 1 - Estilos de Navegador 2 - Nuestro .css 3 - EL !important

Esto es lo que me faltaba saber para no pelear con css xd

gracias a !important puedo llevar pan a mi casa JAJAJAA

Entender esto es súper importante!

Que largo este cursoo pero que necesario!! Vamos Platzi day! Gracias a todo el team por esta oportunidad!

despues de ver estaexplicacion 10 veces ahora me queda super claro XD

Este sera nuestra nueva biblia al momento de escribir CSS y tener dudas en la Especificidad, es decir que tiene mas peso u valor en nuestro documento…

y también hay que saber que hace CSS cuando detecta algun conflicto con los mismos…

Esta clase super importante, dificil de comprender

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

https://samutorres.com/blog/la-especificidad-en-css

RESUMEN CLASE 27:
ESPECIFICIDAD EN
SELECTORES

¿Cómo se controla el
orden al declarar CSS?

I. Importancia
II. Especificidad
III. Orden en las fuentes

I.- IMPORTANCIA

1. Hoja de estilo de agente de usuario
   (Estilos del navegador)
2. Declaraciones normales en hojas de
   estilo de autor (Nuestro .css)
3. Declaraciones importantes en hojas de
   estilos de autor (utilizar el !important)
   Especificidad

A.- ESPECIFICIDAD

B.- REGLA DE CASCADA

III.- ORDEN DE LAS FUENTES

En tus estilos, las declaraciones al final del
documento anularán a las que sucedan
antes en caso de conflicto.

Información resumida de esta clase
#EstudiantesDePlatzi

• Debemos tener claro el orden de la declaración y la especificidad en CSS. Es importante

• El orden de la declaración en CSS es el siguiente:

1. Importancia, 2. Especificidad, 3. Orden de las fuentes

• Si tenemos dos declaraciones importantes, el orden lo va a definir la especificidad y si tenemos dos declaraciones con la misma especificidad, el orden lo define la fuente

• Utilizar !important es una mala práctica y debemos evitarla

• El navegador aplica los estilos en forma de cascada

¿Cómo se controla el orden al declarar CSS?

1. Importancia

   • primero carga los estilos del navegador

   • después carga los estilos de nuestro .css

   • por último aplica los estilos que nosotros hayamos marcado como !important en nuestro .css

• si por algún motivo tenemos más de un estilo para el mismo elemento marcado como !important, se aplicará el que tenga una mayor especificidad, si ambos tienen el mismo nivel de especificidad, pasara a tomar la decisión el orden de las declaraciones, siendo la ultima de ellas la se aplicará(aplicando la cascada)
  NOTA: !important es una MUY MALA PRÁCTICA

1. Especificidad (Mayor a menor importancia)

   • !important (muy importante)

   • estilo en línea

   • #id

   • .class

   • tag (menos importante)

• si por algún motivo tenemos un elemento con más de una declaración css, la que sea más importante será aplicada, sobre escribiendo los estilos de la otra, aunque la menos importante sea la última en declararse (modo cascada)

1. Orden de las Fuentes (estilo en cascada)

• El estilo que se aplicará a nuestro elemento será el último en ser declarado, quiere decir que si tenemos más de un estilo para el mismo elemento, el último en ser declarado sobre escribirá al resto, ya que está usando el método cascada.

no me quedo claro lo que es un estilo embebido

Debemos entender el orden de declaración y especificidad en CSS para comprender bien la herencia. Muchas veces generamos estilos que no vemos en el navegador, o cambiamos un estilo y se rompen otros.

¿Cómo se controla el orden al declarar CSS?

• Importancia. Es uno de los elementos más importantes. Si dos declaraciones tienen la misma importancia, la especificidad de las reglas decidirá cuál se debe aplicar. Si las reglas tienen la misma especificidad, el orden de las fuentes controla el resultado final. El orden en que se cargan los estilos es el siguiente:

1. Hoja de estilo de agente de usuario (estilos del navegador).
2. Declaraciones normales en hojas de estilo de autor (nuestro .css)
3. Declaraciones importantes en hojas de estilos de autor (utilizar el !important). Generalmente cuando un desarrollador no puede aplicar un estilo, usa !important. Esto es una muy mala práctica ya que puede romper otras cosas. Al final no entenderemos por qué los estilos se comportan de manera distinta a la que esperamos.

• Especificidad.

Los números se leen de derecha (menos importantes) a izquierda (más importantes).
Como observamos, !important es el más importante para el navegador, y lo debemos evitar.
Inline styles son los estilos que se embeben en la etiqueta html. Se van a aplicar los estilos embebidos por encima de los estilos aplicados.
Luego se aplican los #id.
Luego se aplican las clases .class.
tag son los selectores que se aplican a etiquetas html.

Si estás, por ejemplo, llamando una clase y no funciona, puedes llamar dos en vez de una. Dos son más importantes que una, logrando así reescribir los estilos.

Puedes calcular la especificidad de los estilos en esta página.

Cuando hay dos etiquetas con el mismo estilo o clases similares, hay un conflicto. Para resolverlo, el navegador toma en cuenta el siguiente algoritmo:

• Orden de las fuentes. Cómo mandas a llamar los estilos o en qué línea de código colocas el estilo.
  En tus estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto. Siempre se van a aplicar los que están al final, es como una cascada. Si estás llamando una clase o id en las primeras líneas y luego llamas la misma clase al final con cosas no tan importantes, se aplicarán las últimas. En CSS es importante en qué línea escribimos el código. Lo mismo aplica para los archivos .css, el orden en que los llamemos es como se van a aplicar.

Aprendi un poco mas en este video les dejo el link y esta screen para entender mejor el tema de esta clase:

https://www.youtube.com/watch?v=OWKXEJN67FE&t=2433s

Por fin pude entender la especificidad!!!
Gracias Diego ❤️

Se nota que HTML y CSS está hecho por varias personas diferentes y es parche sobre parche.
Si estuviera mejor diseñado y estructurado no habría posibilidad de tantos posibles conflictos.

Esta es una clase de Chino jajajaja

Puedes entender la especifidad como un puntaje donde Important vale 10000 pts, estilo en linea vale 1000 pts, el id vale 100, las clases valen 10 y luego los demas
.
En caso de que haya un conflicto, se aplicará el estilo del selector que tenga mayor puntaje:
.
.container-padre {

}
.
.container-padre .container-hijo {

}
.
El segundo selector es más especifico porque tiene 2 clases y suman 20pts, el primero tiene solo una clase y suma 10pts

orden de decisiones cuando hay conflicto al aplicar estilos

La especificidad es super importante en la practica es por eso que siempre se debe usar id y classes para hacer todos los estilos en nuestro codigo evitando usar el important!
esto hace que, si es el caso, se facilite mas encontrar la razon por la que nuestros estilos no se aplican

Muy importante entender la “Especificidad” para poder modificar y agregar estilos en nuestro CSS.

Me está encantando este curso 😄

En lugar de usar !important, considera:

• Hacer un mejor uso de las propiedades en cascada de CSS.

• Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:

Important

Algunas reglas de oro:

• Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.

• Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).

• Nunca uses !important cuando estés intentando escribir un plugin/mashup.

• Nunca uses !important en todo el código CSS.