Cascading CSS variables Lesson

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!

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

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

yes, css is inherited depending on html hierarchy

Thank you very much!:grinning: