Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Additional Pseudo-Classes

Posted by Farfama Hargaaya
Farfama Hargaaya
1,767 Points

How is " root " different from " * " ?

If I'm understand root correctly, it applies style to everything on the page. Doesn't * do that same thing?

2 Answers

Zhihao Wang
Zhihao Wang
9,687 Points
Zhihao Wang
Zhihao Wang
9,687 Points

Hello Farfama,

the * selector literally means select all elements, that means it even selects all elements within an element.

The :root selector matches the document's root element. Since we are applying styles to an HTML doc, that is always the html element.

So in this case, they do the same thing, but I would stick to * because it's more practical and will not run into any complications.

Cheers.

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

* is a universal selector. If I am not mistaken, the root selector would then only effect...the root. Not every element in the markup.

So, if the root is the HTML element, then that would only style the HTML element. If you apply a blue background to the HTML element that will only happen to the HTML element. The body can still have it's own color and things inside the body can still have their own color.

If, on the other hand, you set the universal selector to have a blue background...get ready to see a lot of blue.