I have a component that declares and use a css variable "--test: red"
But I want to re-declare this variable with a new color outside this component.
https://stackblitz.com/edit/js-va9k9q?file=style.css
Is this rule right?
:root *{ --test: green; }
Why * is required? If I remove this, it doesn't work
:root *{ --test: green; } #app { --test: red; } #app h1{ background-color: var(--test); }
Html
<html> <body> <div id="app"><h1>Example</h1></div> </body> </html>
The final result must have a green background-color
Use a second variable in case you want to only consider :root
:root
:root { --new: green; } #app { --test: red; } #app h1 { background-color: var(--new, var(--test)); /* will fallback to "test" if "new" is not defined */ }
<div id="app"> <h1>Example</h1> </div>
2.1m questions
2.1m answers
60 comments
57.0k users
