Accessing global variable in css - css

Question

:root {
--color: blue;
}
div {
--color: green;
color: var(--color)
}
#alert {
--color: red;
color: var(--color)
}
<p>What's my color?</p>
<div>and me?</div>
<div id='alert'>
What's my color too?
<p>color?</p>
</div>
In the above code, how can I access the global value of --color in div with id='alert'?
Or in other words is there any way in CSS to access the global variable like the :: (scope resolution operator) in c++??

Answer 1

You Can't do that with CSS.
If You'll repeat the declaration of the same variable, it'll use the locally declared variable.
See this-
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
Source: Example 5 CSSWG

Answer 2

This is a possibility
:root {
--color: blue;
}
div {
color: var(--color);
}
#alert {
color: var(--color);
}
<p>What's my color?</p>
<div style="--color:green">and me?</div>
<div id="alert" style="--color:red">
What's my color too?
<p>color?</p>
</div>
Or:
:root {
--color: blue;
}
div {
--color: green;
color: var(--color);
}
#alert {
--color: red;
color: var(--color);
}
<p>What's my color?</p>
<div>and me?</div>
<div id="alert">
What's my color too?
<p>color?</p>
</div>

Answer 3

CSS Custom variables are inheritable, that means when you define a variable in :root, it is applicable to all elements.
When you applied it to div it changed for all div and everything inside the div.
And because they have been inherited, their parent's/root's value can't be accessed.
Check out this pen for some trials.
One method hack to do is to make a copy of the variable and use it.
:root {
--color: blue;
--colorRoot: var(--color);
color: var(--color);
}
div {
--color: green;
color: var(--color);
}
#inside {
color: var(--colorRoot);
}
<div> I am inside a div.<br><span id="inside">I am inside</span></div>
I am ouuuuuutside
Pretty sure that's not you would like to do.