Why use * selector in combination with *::before and *::after [duplicate]

Question

I was looking at the Twitter bootstrap framework and I do have a very small question.

I'll see the following section in order to set the box-model to border-box.

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

But if you look at the CSS specifications * targets all elements, so why on earth is the *::after and *::before selector being used?

To me, this seems obsolete because the * selector will already tag all elements.

Answer 1

Does * select all elements?

No, * does not cover pseudo-elements. They cover only real elements that are present in DOM.

From the W3C Spec:

The universal selector, written as a CSS qualified name [CSS3NAMESPACE] with an asterisk (* U+002A) as the local name, represents the qualified name of any element type. It represents any single element in the document tree in any namespace (including those without a namespace) if no default namespace has been specified for selectors.

^{emphasis is mine}

---

Why does property specified under * selector work for some but no others?

For some properties like color you would get the illusion of * applying to all elements including pseudos because they are properties that a child can inherit from its parent.

box-sizing on the other hand is not an inherited property and hence must be explicitly mentioned on the pseudo elements also.

Note: Though the pseudo-elements are named as before and after they are actually children of the element to which it is attached).

---

Example to illustrate inheritance:

Have a look at the below snippet and see how the black border is applied only for the real elements. Among the pseudo elements, only the p:after gets the border because it is directly specified on the pseudo-element itself. The div:after gets no border.

* { /* selects all real elements */    border: 1px solid black; /* not an inheritable property and so pseudos don't get it */    padding: 10px;    color: red; /* inheritable property and so pseudos which are children inherit it */  }  div::after {    content: 'abcd';    margin: 4px;  }  p::after {    content: 'abcd';    margin: 4px;    border: 1px solid red;  }

<div>abcd</div>  <p>abcd</p>

---

What are the list of inheritable properties?

You can find more details about the list of properties that a child can inherit from its parent here.