CSS selector "*:before"

Asked Jan 09 '17 at 20:34

Active Jan 09 '17 at 20:36

Viewed 42 times

I am reading a CSS book and come cross the following snippet,

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

My understanding of * is that it selects all the elements. So I do not get what is *:before and *:after.

Also the book says, the snippet above applies border-box sizing to every element by default, without affecting the box-sizing behavior of existing parts of your project. I also do not quite understand this. Hope someone can help me explain.

Thanks!

edited Jan 09 '17 at 20:36

asked Jan 09 '17 at 20:34

CodingFanSteve

https://www.paulirish.com/2012/box-sizing-border-box-ftw/ – zer00ne Jan 09 '17 at 20:36
Thank you. But I still a bit confused. I think all the things we author for a page reside within . Wonder what is the difference between html {} and *, *:before, *:after {} – CodingFanSteve Jan 09 '17 at 23:17
1

http://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements – zer00ne Jan 10 '17 at 02:56

CSS selector "*:before"

0 Answers0