Menu
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.
279
:before selector inserts something before the content of each selected element(s). :after selector inserts something after the content of each selected element(s). Show activity on this post. :before is exactly the same only it inserts the content before any other content in the HTML instead of after.
Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
Note on actually using ::after and ::before Here's the definition from the specification: ::before Represents a styleable child pseudo-element immediately before the originating element's actual content. ::after Represents a styleable child pseudo-element immediately after the originating element's actual content.
Special welcome offer: get $100 of free credit. CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
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.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
