Explain this CSS custom properties behavior

Question

I'm struggling to understand the following with CSS variables, I believe the code speaks for itself otherwise please let me know.

:root {
    --color: red;
    --hover-color: var(--color);
}

div {
    --color: green;

    background: var(--color);
}

div:hover {
    background: var(--hover-color);
}

<div>
Why am I red on hover? Shouldn't I be green? When inspecting this element on hover, chrome shows the green color!?
</div>

What's absolutely baffling to me is that when inspecting the element in Chrome Devtools it shows the hover color as green??

Answer 1

--hover-color resolves to the --color value of the scope in which it exists, meaning it will compute the value detected at that time. This is to avoid dependency cycles. You can read about these cycles in the specification document.

Custom properties are left almost entirely unevaluated, except that they allow and evaluate the var() function in their value. This can create cyclic dependencies where a custom property uses a var() referring to itself, or two or more custom properties each attempt to refer to each other.

To prevent this, you would want to expand a bit, and do the following:

:root {
    --color: red;
    --hover-color: var(--color);
}

div {
    --color: green;
    --hover-color: var(--color); /* Added this here */

    background: var(--color);
}

div:hover {
    background: var(--hover-color);
}

<div>
I am green on hover, as expected.
</div>

But this raises an interesting issue with Chrome's DevTools, which indeed shows a green color preview next to the hover state's background value. You might want to file an issue and have this looked into.