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

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

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 .sidemenu div:hover

Opción B:

#id h1::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:

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/

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 💚

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados