DEV Community

Discussion on: Quick CSS Quiz #4

Collapse
 
ismail9k profile image
Abdelrahman Ismail • Edited

You can find this challenge very easy this time, if you know how "CSS Specificity" works, but I want to mention here that you can use :not pseudo-class with a fake id to increase selector specificity, rather than using important keyword.

Let's calculate each selector's specificity:
a- #header.is-red (1-1-0)
b- span.is-blue (0-1-1)
c- .is-green (0-0-1)

And the rule-set selector's specificity is (1-1-0), which is greater than a and b selectors and equal to c, but it comes last in the stylesheet; so its declaration will apply over the all three selectors, and all elements will have a black color.