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
Igor Protsenko
15,651 Points*,*:after ,*:before { box-sizing:border-box; }
So i just bumped into this, and i try to fathom, why should we write these pseudoclasses?(I mean :before and :after)What exactly are they doing here?Would be very grateful to see your clarification.
3 Answers
Steven Parker
231,008 PointsThey do that because the property of box-sizing is not inherited by default, and they want this style applied to all elements AND any pseudo-elements.
FYI: These are actually pseudo-elements, and the good practice way to indicate them is with two ::'s, like this:
*, *::after, *::before { box-sizing:border-box; }
Luke Pettway
16,593 PointsThis entire string is just a way to reset the box sizing across all elements. The :before and :after are being used because you want to reset everything, and since the * selector doesn't apply to an elements psuedo elements, you need to apply it to those as well.
Paul Irish has a very detailed explanation of this whole functionality http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Also that is an outdated way of doing it. "This will give you the same result, and make it easier to change the box-sizing in plugins or other components that leverage other behavior." - https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Steven Parker
231,008 PointsLuke, you said "the * selector doesn't apply to an elements psuedo elements". Where did you get that information?
And I see Paul Irish used the single : instead of the recommended :: - perhaps it was after reading that very article that Igor posed this question.
Luke Pettway
16,593 Points"The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree."
From my understanding at least, pseudo elements are not in the document tree, it's not technically part of the DOM.
*{
background: red;
border:1px solid black;
height: 1000px;
}
div:after{
background: orange;
content:'';
display: block;
width: 20px;
height: 20px;
}
The above wont change the background of the after element, nor the height of it, though it will change the height of a div and it's respective background.
Also this Stack Overflow answers the question:
http://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements
Steven Parker
231,008 PointsYour example sets specific attributes directly on the :after element, with a higher specificity than the * selector!
Now try this HTML:
<div>[this is inside the div]</div>
...with this CSS:
* {
color: red;
font-weight: bold;
}
div:after {
content: ' [this is after]';
}
So what color and font weight do you see "[this is after]"?
Luke Pettway
16,593 PointsI think that the color is changing because of the parent element, which is normal behavior. Adding a border doesn't apply it to the pseudo element, or try padding because those are only applying to the parent.
Luke Pettway
16,593 PointsTake your example and do this to it:
* {
color: red;
border: 1px solid black;
padding: 20px;
box-sizing: border-box;
}
*:after{
color: red;
}
If you inspect the :after, the only style you'll see even being applied is the *:after, it doesn't even cascade past the first one, if it did it would show up in inspector as being overridden.
Steven Parker
231,008 PointsAhh, I "drank the cool-aid" (read an incorrect article), and then I confused inheritance with selection. But now I have a much clearer and complete concept of pseudo-elements.
BTW, to be truly a "best-practice" recommendation, that revised code should be rewritten like this:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
kevinardo
Treehouse Project ReviewerI just want to clarify why Stevens code is considered a better practice. In order to differentiate between pseudo-classes and pseudo-elements (which are grouped under the name of pseudo-selectors, hehe ), we use one colon ( : ) for the former and two colon ( :: ) for the latter.
/* Pseudo classes */
:focus
:hover
/* Pseudo elements */
::before
::after
This article from MDN is a good read for diving into pseudo-selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
Igor Protsenko
15,651 PointsThanks a lot guys)