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
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Pointsborder-box :after :before
Hey I just started table course and I see that css file has this code at the beginning
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
What does that code do? I know that box-sizing makes our math easier because it is not counting padding and border but was does does selectors :before and :after do when adding box-sizing?
Universal selector selects all elements so they used before and after to add that code?
3 Answers
Chris Shaw
26,676 PointsHi Tobiasz,
The :before and :after selectors are called pseudo elements, they are two free elements we get for all supported elements in the DOM allowing us to use less markup.
Setting box-sizing on these selectors gives them the same properties as all the other elements on the page.
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsOk but why we can't just use universal selector without using those pseudo elements? We basically select all elements and apply those properties to them. Does before and after make it work faster because I don't see a point of using it in this example. In my opinion it is not a good practice to use this code for every element using universal selector. I know that this css code was just created as an example but I always look for an answer for things I don't fully understand.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Chris Shaw
26,676 PointsPseudo elements aren't real elements therefore they can't be targeted using an universal selector.
In my opinion it is not a good practice to use this code for every element using universal selector.
We share this same opinion, I've never been a fan of targeting all elements and have opted to only target the elements where I need to alter the box sizing as it prevents anything weird from occurring.
Rob Draper
Courses Plus Student 5,812 PointsTobiasz are you speaking of not seeing a point in using pseudo elements as a whole, or just with the :before and :after pseudo elements? If you were questioning the value of pseudo elements as a whole I would definitely checkout the article that Chris Coyier wrote on his site CSS Tricks about pseudo elements. He is very thorough with all of the amazing things that can be done with the pseudo elements :before and :after. Honestly I would use them for no other reason than to prevent superfluous markup on a site.
Jacie Fortune
8,969 PointsI was curious about the universal selector, the pseudo elements and both the -moz- and -webkit- boxsizing syntax. These posts cleared up some of these questions, but the boxsizing was still a mystery. I found a good explanation on Paul Irish's website. He has updated the recommended css for normalizing border-boxes. Here it is:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
pat barosy
6,759 PointsHello,
I still do not understand why box-sizing was used with pseudo elements. :before what & :after what?? What exactly are they doing?
Why is a universal border box a bad thing?