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 Selectors Advanced Selectors :root and :target

Posted by Presica Mathew
Presica Mathew
Courses Plus Student 2,752 Points

What is the difference between * and :root functionalities?

Here is an universal selector, *{ background-color: blue; }

and a root pseudo class, :root { background-color: blue; }

Among the both css, * and :root changes the full page background-color as blue. So is there any specific difference between both of those?

2 Answers

Katie Wood
Katie Wood
19,141 Points

Hey there,

The key difference here is that the universal * selector actually selects all elements on the page. For example, if you did:

* {
    background: green;
}

it would select all elements on the page and make their backgrounds green. On the other hand, :root is essentially the same as selecting the <html> tag, which will just set the page's background to green - other elements will not have a background color unless separately assigned.

If you're curious about the difference between :root{} and html{} for styling an html document, there isn't much of one, other than that :root will have more specificity, being a pseudo-class. This means that if you had both on your document, any styles in :root that conflicted with styles in html would take precedence. For example:

:root {
    background: green;
}

html {
    background: blue;
}

Here, the background would be green, because pseudo-classes have higher specificity in CSS than tag selectors.

Does that make sense? Hopefully that cleared some things up - let me know if you have any further questions!

Rich Salvucci
Rich Salvucci
16,716 Points
Rich Salvucci
Rich Salvucci
16,716 Points

The * selector is the universal selector will match all of the elements in a document. The :root pseudo class selects the root level element. Which on a web page is the <html> tag. You can add classes to the * selector to override it. The pages of the MDN docs have good examples. https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/:root