Overwrite css variables

Question

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

Temani Afif · Accepted Answer · 2021-01-10 08:51:22Z

2

Use a second variable in case you want to only consider :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>

Or you keep using the code you show which is correct since you will target all the elements (with *) to set the variable --test that will get used instead of the one inherited from #app

answered Jan 10, 2021 at 8:51

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

armin yahya · Accepted Answer · 2021-01-10 11:12:01Z

1

This is about ordering and priority of css selectors

if you do like this:

:root {
  --test: red;
}

.
.
.

:root {
  --test: green;
}

the second selector have more priority

but if you do:

:root #app{
  --test: green;
}

.
.
.

:root {
  --test: red;
}

the first selector will apply for #app. if another block is defined outside of #app, it would get red color.

:root * {} works because it have more priority.

Collectives™ on Stack Overflow

Overwrite css variables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related