40

Quiz de CSS: ¿cuánto sabes sobre Especificidad?

17294Puntos

hace 2 años

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:

  • Una imagen con la pregunta inicial del quiz y 2 opciones de respuesta.
  • El código CSS correspondiente a las opciones de respuesta.
  • La respuesta correcta con su explicación.
  • Algunos recursos para reforzar este concepto.

Pregunta de Especificidad

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

Pregunta del quiz

¿Cuál de los siguientes selectores es más específico?

Opción A:

p.sidemenudiv:hover

Opción B:

#idh1::first-letter

Respuesta correcta

Y la respuesta correcta es...
Opción B

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:

valorregla
x0000!important
x000Estilos en línea
x00#id
x0Clases, atributos y pseudoclases
xElementos y pseudoelementos
0Selector 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 = 22100 + 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/

Cálculo de especificidad

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 💚

Estefany
Estefany
teffcode

17294Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
6
20490Puntos

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.

1
9218Puntos
Me encantan las explicaciones de TeffCode!! Genial!
1
5401Puntos

hay alguna pagina en donde se acumulen todos los quizes de este tipo?

1
18307Puntos

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

1
24986Puntos

Bastante útil esta tabla cuando tenemos problemas maquetando. Muy bueno el quiz💚✌

1
11359Puntos

Le di a la respuesta peroooo, no por lo que yo pensaba … la explicación me dio mucha claridad, excelenteee

1
331Puntos

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.

1

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

1
1734Puntos
Animo eso estuvo genial
1
1734Puntos
Que bien explica
1
248Puntos

Actualmente estoy trabajando en la administración de documentos en una empresa y necesitaba organizar la administración de documentos de alguna manera. Decidí que sería conveniente guardar documentos como PDF. Además, tengo una página https://www.islabit.com/170434/donde-se-puede-solicitar-la-firma-electronica.html encontrado en el que puedo firmar electrónicamente y usarlo para firmar documentos, incluso cuando estoy actualmente fuera de la oficina.

1
5196Puntos

Uno de los plares del CSS que si no lo dominas habran mala practicas.

1
8818Puntos

Esa tablita es oro 😃 Excelente explicación

1
12460Puntos

Muchas gracias Estefanny! gran Post!

1
10834Puntos

Que nivel de detalle la explicación de la respuesta de este Quiz, Excelente 👏🏻

1

buena explicación, me dio una mejor claridad con respecto a este concepto de especifidad