Cascading CSS variables Lesson

Curriculum Help
,
1

I have a question about CSS variables visibility and will use this (https://learn.freecodecamp.org/responsive-web-design/basic-css/cascading-css-variables/) lesson to demonstrate.

When I place the --penguin-belly: pink; declaration inside :root, it is visible throughout the page. Why is it that when I move the declaration from :root to the .penguin class I can still reference it inside other classes which are not nested inside the .penguin class, which is contrary to what the description of this lesson states:

When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it.

I find this strange and counter-intuitive. Any help will be appreciated!

2

there is a div that has the .penguin class, when you move the variable declaration in the .penguin class selector you can still reference that variable in all the elements inside that div

3

So, what decides visibility aside from :root class is the hierarchy of the elements the class is assigned to

4

yes, css is inherited depending on html hierarchy

5

Thank you very much!:grinning: