Este quiz sobre especificidad en CSS consiste en saber cuál de los grupos de selectores mostrados es más específico. Es decir, cuál tiene mayor relevancia para el navegador a la hora de aplicar los estilos en los elementos de HTML.
A continuación encontrarás:
En la siguiente imagen encontrarás una pregunta y luego las opciones a y b. Tu desafío en este quiz es elegir la opción que mejor resuelva el objetivo antes de ver la respuesta correcta.
⭐️ Pista: Recuerda Cascada y especificidad en CSS
¿Cuál de los siguientes selectores es más específico?
Opción A:
p.sidemenudiv:hover
Opción B:
#idh1::first-letter
La respuesta correcta es la Opción B: #id h1::first-letter.
En la siguiente tablita encontrarás el valor que tiene cada regla de CSS:
| valor | regla |
|---|---|
| x0000 | !important |
| x000 | Estilos en línea |
| x00 | #id |
| x0 | Clases, atributos y pseudoclases |
| x | Elementos y pseudoelementos |
| 0 | Selector universal (*) |
Esta tablita es muy útil, ya que con ella podremos saber qué tan específico es un conjunto de selectores al realizar las sumas correspondientes a los selectores que tengamos.
En este caso, la suma de los diferentes valores del quiz es la siguiente:
| p .sidemenu div:hover | #id h1::first-letter |
|---|---|
| 1 + 10 + 1 + 10 = 22 | 100 + 1 + 1 = 102 |
Debido a esto, la suma con mayor valor nos dará como resultado el grupo de selectores con mayor especificidad.
En esta herramienta también podrás hacer este cálculo mucho más fácil: https://specificity.keegan.st/
Recuerda que puedes tomar el Curso de Frontend Developer para aprender sobre especificidad y muchas otras herramientas de CSS.
¡Cuéntanos en los comentarios cómo te fue en este quiz! ¡Nos vemos en el próximo!
#NuncaParesDeAprender 💚
He estado revisando los quizzes, y aunque las preguntas me han resultado sencillas, las explicaciones posteriores valen la pena y me han ayudado a reafirmar conocimientos.
los dos sirven para la misma finalidad por lo mismo podemos elegir al que nos sirva mas para elegir cual utilizar para programarlo segun la finalidad que queremos
n
Uno de los plares del CSS que si no lo dominas habran mala practicas.
Muchas gracias Estefanny! gran Post!
hay alguna pagina en donde se acumulen todos los quizes de este tipo?
Sinceramente acerté solo porque sabía que el selector ID es más importante que p, pero no recordaba de puntos ni la sumatoria de cada selector para llegar a la conclusión final. Creo que es hora de repasar el curso de Frontend Developer
Bastante útil esta tabla cuando tenemos problemas maquetando. Muy bueno el quiz💚✌
Le di a la respuesta peroooo, no por lo que yo pensaba … la explicación me dio mucha claridad, excelenteee
La acerté porque sabia que los IDs son de gran peso, pero no sabia acerca de la info que nos da esa tabla es excelente para tener en cuenta.
Esa tablita es oro 😃 Excelente explicación
Que nivel de detalle la explicación de la respuesta de este Quiz, Excelente 👏🏻
buena explicación, me dio una mejor claridad con respecto a este concepto de especifidad