Ryu4fly
September 16, 2020, 1:17pm
#1
Not really sure I understand the difference between creating using a custom variable compared to a :root??? They do the same thing which turns the hand gray lol
.penguin {
--penguin-skin: gray;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}
.left-hand {
color: var(--penguin-skin);
}
:root {
--penguin-skin: gray;
}
.left-hand {
color: var(--penguin-skin);
}
ilenia
September 16, 2020, 1:27pm
#2
here the variable is available to the whole page
here the variable is available only inside the .penguin
element(s)
Ryu4fly
September 16, 2020, 1:30pm
#3
I kind of get that for :root it affects the whole page and any declaration within a different selector would overwrite it (Am I correct here?)
Okay, but how come it can affect .left-hand? thats where I am lost…
ilenia
September 16, 2020, 1:32pm
#4
look at the html elements, is the element with class of left-hand
inside the one with class of penguin
?
Ryu4fly
September 16, 2020, 2:01pm
#5
Yeah, I kinda realized that when I re-read your first response…Needed to look at the HTML code