Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.

Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.

Antes:$249

Currency
$219/año
Paga en 4 cuotas sin intereses
Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

03h

59m

34s

40

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

15903Puntos

hace un año

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

15903Puntos

hace un año

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

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
8951Puntos
Me encantan las explicaciones de TeffCode!! Genial!
1
5341Puntos

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

1
18188Puntos

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
24888Puntos

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

1
11332Puntos

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

1
330Puntos

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
182Puntos

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
5195Puntos

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

1
8734Puntos

Esa tablita es oro 😃 Excelente explicación

1
11779Puntos

Muchas gracias Estefanny! gran Post!

1
10715Puntos

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