René Antonio González
PreguntaNo tengo claro lo del orden de especifidad.
No entiendo la parte de números.
Solo lo entiendo a mi concepto que si tengo un contenedor padre con ciertos estilos, estos se van a aplicar a todos los elementos hijos.
Pero, si agrego:
.container section p {..estilos..}Pero volviendo a los números no entiendo. Entendí el orden de prioridad, pero no entiendo como es que a veces pasa de ser 1 a ser un 2, es decir, en la prioridad de clase no hay un uno, si no, un dos ¿Entonces poner doble clase es más prioridad?
Por qué en VS Code aparecen solo tres (0,0,0) de especifidad? Qué representa cada uno? Considerando que en el ejemplo del profe son cinco posiciones.
Les agradezco que me lean y quisiera saber sus respuestas con vuestras palabras, gracias.
- Selectores de etiqueta (0,0,1)
- Selectores de clase (0,1,0)
- Selectores de ID (1,0,0)
Alex Camacho
Woow, esta funcionalidad está genial. Gracias por compartirlo.
Aldo Miguel Ortiz Parodi
No, solo basta con poner el mouse encima del nombre de tu clase, id en el archivo CSS y te mostrará la especificidad. Pruébalo. Te dejo un GIF que te enseña cómo:
Alex Camacho
Hola AurdoPE 👀 eso es alguna extensión? o sea, para que se te muestra la especifidad así en VSCode.
Aldo Miguel Ortiz Parodi
¿Te soy sincero? Yo no he memorizado todoooos estos datos, aunque en casos extremos sí los reviso. Básicamente sigo estas reglas mentales: Uso siempre clases, cuando quiero que algo sea más "fuerte", pues uso ID. Y los selectores sin clases ni ID tienen menos "fuerza". Además vscode te ayuda mucho a ver esto:
Si te percatas en la imagen, el estilo que aplico usando una clase tiene un peso (0,1,0), el cual es más "fuerte" que aplicarlo directamente al elemento, el cual solo tiene una especifidad de (0,0,1). Esto lo ves poniendo el puntero del mouse encima de la propiedad en CSS. Básicamente así veo que tan "fuerte" es una regla que estoy haciendo.
Alex Camacho
La especificidad es la forma en que los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. El orden y el origen de clasificación del CSS intervienen en este proceso.
Entre mayor especificidad, mayor va a ser la probabilidad de que sus declaraciones se usen sobre las demás. La especificidad se define de acuerdo a la siguiente tabla.
Por cada tipo de selector se suma uno a la posición de X según corresponda, al final entre mayor sea el número resultante más específico es el estilo y por ende tendrá prioridad sobre otros que tengan un valor menor.
Julián Ramírez
¡Hola Rene! De Granda ve 5 tipos de especificidad ya que el está teniendo en cuenta el
!importantEstos funcionan como contadores para cada selector. Si yo pongo el selector
.clase1 .clase2 .clase3
Josué David Coreas Paiz
Hola! Los numeros lo que indican en el orden de importancia que estos tienen, por ejemplo los !important para el navegador tendrán mayor importancia que cualquier otro. Cuando dices que pasa de ser un 1 a un 2 es porque estás anidando dos clases entonces estás se suman, indicando que 2 los estilos definidos en estas dos clases tendrán mayor prioridad que solo una. VS Code solamente tiene el orden para los 3 principales tipos que son:
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/achievements/badges-html-css-afa64acb-64a4-486d-96a5-f930fbb7ee32.png){kind=small}
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/courses/Opengraph-definitivo-html-css2.png)