Jump to content
luuis

star symbol before the braces

Recommended Posts

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;
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×