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!