Accessing global variable in CSS

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
<p>What's my color?</p>
<div>and me?</div>
<div id='alert'>  What's my color too?  

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 global variable like the :: (scope resolution operator) in c++ ??

you can do something like this.

#alert {
color: var(--color);

I don’t think this is possible.