I'm a bit confused by these CSS selectors? [Resolved]

Link: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-25

In line 2 and 6, I’ve been instructed to use a * and a :root selector.
I thought they mean the same thing, and if they are different, what is the difference between these selectors?

* select all the elements

the :root instead is a selector that is parent of anything else, allowing the variables to be available everywhere.

try to add theborder property in :root (and remove it from the * selector), see what gets a border

1 Like

Oh, now I see! The border trick helped a lot. Thank you so much!