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
Enrique del Bosque
3,909 PointsWhy using the universal selector (*{}) if we can apply a CSS rule for the whole document using body{} or html{}?
I don't get the point. Why do you use an universal selector instead of body{ };
or
html { };
6 Answers
Donnie Reese
17,211 PointsI wrote up this little example. codepen.io example
It's about inheritance vs. selection.
When you choose something like:
body {
font-family: Verdana;
}
This is inheritance. It follows flows down. Each child inherits the properties of it's parent. It doesn't create new instances of the different definitions in the selector.
If you added this:
* {
font-family: Arial;
}
body {
font-family: Verdana;
}
You would think that, because body comes after the '*', it would would override the previous selector. It doesn't, though.
What is happening is that actual definitions definitions override inheritance. The '*' appears to actually act as though it creates a new selector for each element. Just like applying inline styles in the actually element would override any stylesheet. That is what I gather, at least.
Enrique del Bosque
3,909 PointsIn that case, would you get the same result by using:
body{ box-sizing: border-box; }
??
Donnie Reese
17,211 PointsNo it would not.
Because you need to select all of the :before and :after pseudo elements. you would still have to use the '*' selector in conjunction with the body selector.
Oh! I found this little tidbit.
body
- Applies style properties to body element.
- Elements within body may inherit the property values. Some properties default to 'inherit'.
- Style declarations that match an element within body can override the inherited style.
The Universal Selector * (all elements)
- Applies style properties to all individual elements.
- Replaces inherited style properties, and default 'initial values'. Blocks inheritance.
- Other, more specific css selectors that match an element will replace the style properties applied by *.
This seems to be one of the harder things in css for me to wrap my head around. I usually refer to the MDN reference, but even it only has some information on it.
Enrique del Bosque
3,909 PointsOK. Thanks guys.
So if I get it right, * will override all styles (inline styles, external css sheets an internal styles)?
Still beleive * it's a little bit usless.
Donnie Reese
17,211 PointsIt's not something you use for a lot. However, one use that I use all of the time is to reset the box-sizing in a lot of my layouts to render better widths and height. It has saved a lot of pain. It's definitely a utility type of thing.
*, *:before, *:after {
box-sizing: border-box;
}
It's absolutely something that you would use to obtain a very specific goal of applying something to everything, no matter what. I want to think that inline styles (in the actually style="" attribute of an element) override it. I can't say for certain without testing that.
Enrique del Bosque
3,909 PointsOK. I'm getting more of an idea. Even tought , I think I'll put the universal selector away from stylesheets.
Gracias Donnie !
Donnie Reese
17,211 PointsNo problem, Enrique. Good luck to you.
Marc Sanchez
20,039 Points- is the universal selector. It has more specificity than body and it also applies the style to each independent html element. It replaces inherited style properties.
Gary Byrne
16,514 Pointsuniversal selectors have no effect on specificity?