3 ms·
In OP's example, the <p> would be colored blue, because the * selector directly targets it, taking priority over the inherited value from the #alert parent elem
by zdragnar 11mo ago
In OP's example, the <p> would be colored blue, because the * selector directly targets it, taking priority over the inherited value from the #alert parent element if the CSS had been normal assignment:
#alert { color: red }
* { color: blue }
Variables behave slightly differently, in that they don't follow specificity rules. The definition of the variable / property behaves like a scope, and affects everything within it, hence the <p> being colored red instead of blue.
- wrs 11mo agoThe variables behave the same as inline styles on the elements would, though, right? And you can do variable assignments in style rules, and they follow specificity as usual? I am out of my comfort zone here, but if that were true then at least I’d find it understandable. Variables act like properties and rules still act like rules.
- LudwigNagasena 11mo ago* directly targets elements and assigns to them `color: var(--color)` and is not overwritten by anything. It is normal CSS assignment. Variables aren't macros or templates or rewrite rules. They are simply properties. Variables don't follow specificity in the same sense that other properties don't follow specificity. Specificity only applies to rules in the first place, not to properties.