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 trialDiana Garay
841 PointsI would like to know what this code means
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
2 Answers
Emma Willmann
Treehouse Project ReviewerThe * is the universal selector. It selects all elements, then the *:before and *:after selects the psuedo classes as well.
The border-box part of the code changes how the total width of an element is calculated. If you set a div to be 100px wide, with 20px of padding on all sides, your box would actually end up being 140px wide. When you use border-box, the padding is pushed into the width you set. Your div would actually be 100px wide the padding would be within, leaving 60px for content.
Jovanny Elias
16,204 PointsHey you can read more about it on this article on CSS tricks it's a great site to go and read about what elements do and tips as to how to use them.
James Barnett
39,199 PointsAlso from CSS Tricks International box-sizing Awareness Day
Gianni Zamora
9,547 PointsGianni Zamora
9,547 Points:before - before an event happens meaning before onclick be color blue. :after - if focusing on what happens after something triggers an event. box sizing - is applied to a box say inside a div, so you can give that "box" a border or any other compatible properties