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

Luke, you said "the * selector doesn't apply to an elements psuedo elements". Where did you get that information?

And I see Paul Irish used the single : instead of the recommended :: - perhaps it was after reading that very article that Igor posed this question.

"The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree."

From my understanding at least, pseudo elements are not in the document tree, it's not technically part of the DOM.

*{
  background: red;
  border:1px solid black;
  height: 1000px;
}

div:after{
  background: orange;
  content:'';
  display: block;
  width: 20px;
  height: 20px;
}

The above wont change the background of the after element, nor the height of it, though it will change the height of a div and it's respective background.

Also this Stack Overflow answers the question:

http://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements

Your example sets specific attributes directly on the :after element, with a higher specificity than the * selector!

Now try this HTML:

<div>[this is inside the div]</div>

...with this CSS:

* {
  color: red;
  font-weight: bold;
}
div:after {
  content: ' [this is after]';
}

So what color and font weight do you see "[this is after]"?

I think that the color is changing because of the parent element, which is normal behavior. Adding a border doesn't apply it to the pseudo element, or try padding because those are only applying to the parent.

Take your example and do this to it:

* {
  color: red;
  border: 1px solid black;
  padding: 20px;
  box-sizing: border-box;

}

*:after{
  color: red;
}

If you inspect the :after, the only style you'll see even being applied is the *:after, it doesn't even cascade past the first one, if it did it would show up in inspector as being overridden.

Ahh, I "drank the cool-aid" (read an incorrect article), and then I confused inheritance with selection. But now I have a much clearer and complete concept of pseudo-elements.

BTW, to be truly a "best-practice" recommendation, that revised code should be rewritten like this:

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

I just want to clarify why Stevens code is considered a better practice. In order to differentiate between pseudo-classes and pseudo-elements (which are grouped under the name of pseudo-selectors, hehe ), we use one colon ( : ) for the former and two colon ( :: ) for the latter.

/* Pseudo classes */
:focus
:hover

/* Pseudo elements */
::before
::after

This article from MDN is a good read for diving into pseudo-selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements