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

HTML HTML Forms Organizing Forms Fieldsets and Legends

Diana Garay
Diana Garay
841 Points
Posted by Diana Garay
Diana Garay
841 Points

I would like to know what this code means

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
Gianni Zamora
Gianni Zamora
9,547 Points
Gianni Zamora
Gianni 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

2 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

The * 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
Jovanny Elias
16,204 Points
Jovanny Elias
Jovanny Elias
16,204 Points

Hey 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.

http://css-tricks.com/box-sizing/