local css variable ?

i have this test code : https://jsfiddle.net/wmfgyo7p/ can somebody explain to my why each div have a different color ? and why aren't all my div blue ? when looping on my divs, i change the ":root" css variable...but set it for my current div. does this mean a "local" css variable is created for each of the divs ? (with the same name) => even if this is the reasult i'm looking for, i'm a bit confused on why its works...
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
20 Replies
ἔρως
ἔρως6d ago
90*i thats why
Doksuri
DoksuriOP6d ago
i think you didn't understand my question
ἔρως
ἔρως6d ago
each div has a --color
Doksuri
DoksuriOP6d ago
even if it's defined in :root ?
ἔρως
ἔρως6d ago
whats in the :root doesnt matter anymore
Doksuri
DoksuriOP6d ago
oO
ἔρως
ἔρως6d ago
you created a new properly
dys 🐙
dys 🐙6d ago
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
dys 🐙
dys 🐙6d ago
Yes, it is setting a value for the variable on the element. You can do the same thing in the stylesheet.
ἔρως
ἔρως6d ago
what you did is the equivalent of setting let color = 0 inside a function even if there is another color, it doesnt matter: inside that function, it's only the color you defined with let color
Doksuri
DoksuriOP6d ago
so, css vars are a bit like js
dys 🐙
dys 🐙6d ago
Are you responding to me? I set the color on .c4 in the stylesheet.
Doksuri
DoksuriOP6d ago
if doesn't exists locally, it goes up the tree to find it ?
ἔρως
ἔρως6d ago
no, im just explaining in general
Doksuri
DoksuriOP6d ago
ok
ἔρως
ἔρως6d ago
yes, because it proagates from the parent there is 1 exception: ::backdrop that pseudo-element doesnt receive anything from the parent element nothing propagates to ir it inherits from nothing at all
Doksuri
DoksuriOP6d ago
👍 thanks for the lightening enlightment (typo)
dys 🐙
dys 🐙6d ago
It's funny that you edited the text saying that your previous text was a typo. 😸
Doksuri
DoksuriOP6d ago
shhh 🙂
ἔρως
ἔρως6d ago
🤣 busted

Did you find this page helpful?