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
90*i
thats why
i think you didn't understand my question
each div has a
--color
even if it's defined in :root ?
whats in the :root doesnt matter anymore
oO
you created a new properly
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Yes, it is setting a value for the variable on the element. You can do the same thing in the stylesheet.
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
so, css vars are a bit like js
Are you responding to me? I set the color on
.c4
in the stylesheet.if doesn't exists locally, it goes up the tree to find it ?
no, im just explaining in general
ok
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👍 thanks for the lightening
enlightment
(typo)
It's funny that you edited the text saying that your previous text was a typo. 😸
shhh 🙂
🤣
busted