Accessing global variable in CSS

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

2

you can do something like this.

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

I don’t think this is possible.