My HTML code doesn’t have an * in it anywhere that I know of, why am I creating a selector for all elements that have an * in it to be targeted? I don’t understand!!
Would someone please explain it (this * business) to me in human language?
Thank you.
html {
box-sizing: border-box;
}
*, ::before, ::after{box-sizing: inherit;}
The * means “all elements”. In other words, it will target any element on the page.
The * is a selector that targets every element in your html document. So in the example above, let’s say you have the following html code:
<html>
<head></head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
With the CSS you provided, the “html” selector targets the tag specifically, but not the child elements nested within it. So only the html tag has been flipped to “border-box” for its box-sizing.
The style applied to the *, ::before, ::after selections would select not just the html, but the body, as well as div a and div b. If you were to add any new elements, they would also receive the “inherit” box-sizing which would go to border-box since the highest element (html) was set to border-box.
Make sense?
Thank you.
What about this one:
position: absolute;
top: 23px;}
what does position mean in CSS (Don’t worry, I know the meaning of the word in human language)?
In addition with this property, always the value absolute is used.
And why is that with this property, it’s only the word "top" that is used instead of “margin-top” or "border.-top" or “padding-top”???
position is a CSS property that allows you greater control over how an element is positioned on the page. Way too long to give a write up here on how it works. My suggestion is you google “CSS position” and you’ll get a ton of links describing what it does. Here’s one to start with:
Thank you very much.
Hi,
long time no see 
!!
Ok. Back to my previous question, if that’s the case(according to your explanation) why not just create a body{} selector. To my understanding, a “body” selector is applied to every element inside the “body” element.
Am I wrong?
Hi,
yes, a little bit, but the box-sizing and border-box kind of threw me off a bit.
Nonetheless, thank you for your explanation. It helped make things clearer.
Thank you.
Yes, you are wrong, this is not correct. The body selector is only applied to the body element. Some properties defined in the body selector may be inherited by child elements of the body, but not all of them. If you want every element to have the same property then you need to use *.
Here’s the list of properties that automatically inherit: Inheritance. Everything else you need to set on the element you want to apply a given property to (though you can explicitly say you want to inherit a parent property, like color: inherit;)
Even then it’s not 100%, even without any of your own CSS outside of that body rule (for example, form elements specify their own styling that you would need to explicitly remove/override)
Thank you for your response. I understand.
Ciao
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.