Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Tables Table Basics Create a Basic Table

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,517 Points

border-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
Chris Shaw
26,662 Points

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,517 Points

Ok 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
Chris Shaw
26,662 Points

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

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

Link: http://css-tricks.com/pseudo-element-roundup/

I 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
pat barosy
6,759 Points

Hello,

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?