Instagram | Twitter | LinkedIn
Consider the following code:
| CSS | HTML |
|---|---|
 |
 |
Which one is more specific ?
A. .container > .item
B. p > span
👀 Click here to see the correct answer and explanation
| Correct Answer | Explanation |
|---|---|
| A 🎉 | .container > .item has a higher specificity than p > span, becouse it uses two class names where the specificity calculated is 0, 0, 2, 0 = 20 in comparison to two selector names where the specificity calculated is 0, 0, 0, 2 = 2. Thus, the item will have a color blue. |
I recommend you to read my thread in Twitter about Specificity calculation in CSS 👉🏼 Specificity
Considera el siguiente código:
| CSS | HTML |
|---|---|
|
|
¿ Cuál es más específico ?
A. .container > .item
B. p > span
👀 Haz click aquí para ver la respuesta correcta y su explicación
| Respuesta correcta | Explicación |
|---|---|
| A 🎉 | .container > .item tiene mayor especificidad que p > span, porque este usa dos nombres de clases en donde la especificidad calculada es 0, 0, 2, 0 = 20 en comparación a dos nombres de selectores en donde la especificidad calculada es 0, 0, 0, 2 = 2. Así, el item tendrá el color blue. |
Te recomiendo leer mi hilo en Twitter sobre el cálculo de la especificidad en CSS 👉🏼 Specificity
Hola, no sé porqué, pero los íconos aparecen montados sobre el texto en mi navegador (Chrome versión 83.0.4103.97) te envío un recorte de como se ve:
