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 Basics (2014) Basic Selectors Type Selectors

PIMORN SENAKAT
PIMORN SENAKAT
4,735 Points

Is there a difference between '*' selector and 'html' selector?

If I use html selector, it means that all elements in page will affect, and so '*' selector. So what the difference is?

2 Answers

The * selects all elements, it's known as the universal selector for this reason. HTML selects the HTML element specifically because it is an element selector, for example, if you set:

html {
height: 100%;
}

That height is being applied to the HTML element itself, not every element you have. However, if you were to do:

* {
height: 100%;
}

That would select all elements and set their height to 100%, which obviously wouldn't be recommended, but this is just an example.

Evan Gatchell
Evan Gatchell
5,878 Points

What is found outside of that HTML element? What does the *{} selector change that the html{} wouldn't?

I believe it's a matter of specificity/inheritance, the * universal selector is targeting all elements on the page.

PIMORN SENAKAT
PIMORN SENAKAT
4,735 Points

I understood that it won't be different if you set color/margin (the properties that inherit to their children). But if you set the height/width it will (the properties that not inherit).