override local css variable with global variable

Question

Is it possible to override the local CSS variable with a global variable? As we know vice-versa is always possible. Can someone help if there is anything like !important to override the local variable.

Taking the below example, want red to have more precedence than blue.

 :root{
    --primarycolor: red !important; /*Like this*/
  }
  body {
    color: var(--primarycolor);
    border:2px solid var(--primarycolor);
    padding:5px;
  }
  div{
    --primarycolor: blue; /*Want to override this*/
    color: var(--primarycolor);
    border:2px solid var(--primarycolor);
    padding:5px;
  }

Check all border color - I am in body
<div>I am in div</div>

As far as I know, there is no such feature in CSS. Instead what you can do is to use fallback values var(--primary-color, blue);. See developer.mozilla.org/en-US/docs/Web/CSS/… — snwfdhmp
– snwfdhmp, Commented Nov 18, 2020 at 12:19
@TemaniAfif Actually I update the global variable with JS dynamically. Thank you I didn't mention that. — Jyothi Babu Araja
– Jyothi Babu Araja, Commented Nov 18, 2020 at 12:22

Temani Afif · Accepted Answer · 2020-11-18 12:30:26Z

3

Instead of :root use *. It won't be a global variable but still declared as a global one that will apply to all the element (instead of being inherited by all the element)

* {
  --primarycolor: red !important; /*Like this*/
}

body {
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

div {
  --primarycolor: blue; /*Want to override this*/
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

Check all border color - I am in body
<div>I am in div</div>

And without important the local one will apply since it's more specific:

* {
  --primarycolor: red;
}

body {
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

div {
  --primarycolor: blue; 
  color: var(--primarycolor);
  border: 2px solid var(--primarycolor);
  padding: 5px;
}

Check all border color - I am in body
<div>I am in div</div>

answered Nov 18, 2020 at 12:30

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

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

1 Comment

Temani Afif Over a year ago

@JyothiBabuAraja check this: stackoverflow.com/a/14791415/8620333

Collectives™ on Stack Overflow

override local css variable with global variable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related