CSS lesson contracition or doubt

Contributors
1

Hello, I’m not sure if this is the correct place to ask this, but I didn’t find any other topic where to ask it . Sorry for the possible inconvenience.

Doing the CSS lessons, I found something that looks like a contradiction.

In the lesson: “Basic CSS: Inherit CSS VariablesPassed” it says that “When you create a variable, it is available for you to use inside the selector in which you create it. This happens because CSS variables are inherited, just like ordinary properties.
To make use of inheritance, CSS variables are often defined in the :root element.”
For what I have researched, that is how it works. This is ok.

But in a previous lesson: " Basic CSS: Attach a Fallback value to a CSS VariablePassed", we use in the exercise a variable declared inside a selector different to :root or body selector. So: ¿how does it work? it shouldn’t be possible to use this variable out of the selector where it was created… isn’t it?
So, it looks like a contradiction that we could use a variable that was not created inside :root or body selector.
Why does it happens? is it just a mistake or have I missed something?
Thank you very much for your assitance.
Greetings

2

Welcome, seamuss.

Do we use a variable inside a selector different to :root?

When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.

The whole point of the lesson is to show that the custom variable is not available. That is why you are called to add a fallback.

Also, for that example, there is no contradiction, because in the Inherit CSS Variables lesson, a variable is

It also is available in any of that selector’s descendants.

Which is true for the penguin example. Just follow the HTML.

Also, I moved this to the sub-forum we generally use to discuss challenges’ content.

Hope this helps.

3

Thank you very much for your help.

I should have use the example of the previous lesson: " Basic CSS: Use a custom CSS VariablePassed", where we use the same variable but the point is not the fallback element. But as you said, we have the inheritance property, now I see it.

I know my question could sound silly, but honestly, I don’t know why I spent a lot of time trying to understand it. This is the first time I use the forum. I wasn’t understanding clearly that the inheritance was established in the html, not in the CSS. Now I see that it was very simple.

Once again, thank you very much for your help. :slight_smile: