CodePark/ questions / Cascade, specificity & inheritance
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Cascade, specificity & inheritance

The HTML is <main id="main"><article><p class="note">Hi</p></article></main>. What colour is the text?

:where(#main) p      { color: red; }
p:is(.note, #x)      { color: blue; }
article p.note       { color: green; }
blue

Blue is right. :is() takes the specificity of its most specific argument, even one that doesn't match. So p:is(.note, #x) counts the #x id and is (1,0,1). Specificity is written as (ids, classes, types). That beats article p.note at (0,1,2), so green is the tempting wrong answer.

Red is wrong because :where() always adds zero specificity. So the first rule is just (0,0,1), for the p.