star symbol before the braces

[luuis]

I found this W3School example, some days ago. Its meant to explain clearfix, but what intrests me is this:
"* {
    box-sizing: border-box;
}"

The star symbol, what is that for?  If replace it with 'body' then it has a different style, not totally just the letters "The City...." are above, not left. But this symbol doesnt have any explication anywhere.

* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}

 

[Ingolme]

It's called the universal selector. It applies the specified style to all elements on the page. Personally, I think it is better not to use it.

[luuis]

I can imagine to agree, to better not to use. But how to replace it, without having  the page changed?
Whats the meaning here, I have to ask, "...specified style to all elements ...". An element has to me   o n l y    its specified style, or what else does it have?

[Ingolme]

It works like any other selector, the same CSS precedence rules apply. It just adds the specified style to all elements on the page.

In the specific example you gave, the box-sizing property needs to be applied to all of the layout elements on the page. You should read about box-sizing.

[luuis]

@Ingholme, if this is the purpose"It just adds the specified style to all elements on the page. ", then there is no other way to have it this way.
Brings me back to your recomendacion, (better not), but what is it what you are doing, instead?

[Ingolme]

Since you're using a stylesheet that somebody else built, just leave it as it is. It's probably going to be too complicated to change it when somebody else used that as a foundation.

If you can identify all of the elements that require box-sizing to work properly, then you can use a selector to target only those elements.

[luuis]

21 hours ago, Ingolme said:

Since you're using a stylesheet that somebody else built,

No, I don't

[luuis]

21 hours ago, Ingolme said:

then you can use a selector to target only those elements.

Sure, refering to your answer, the universal selector is the only one to have it for all elements. What is it what your are using instead of?

[Ingolme]

It always depends on the context. The point is that not all of the elements need that rule, you have to determine which elements need to have that CSS rule to look correct.

[dsonesuk]

The reason it is used is because not all browsers follow the exact same styling rules per element for example padding and margins, so using this means it will uniform from any browser from now on. Trying to do this would be impossible to target individual browsers styling to individual element styling for that browser. That is why it is used here, all browsers will use this styling from now on, because that is required for this specific layout to work and be the same whatever browser is used.

[luuis]

Hi dsonesuk, thank you , but it brings me back to what ingolme sayed in the beginning, "better not to use". So there must be something else.
But its allright, I dont wanna overload it

[dsonesuk]

You will find reset.css and normalize.css by googling, that will do all this for you, but! IF they don't have set with box-sizing as the layout requires, then you can override them by placing your custom css below the links for these files.