luuis Posted October 26, 2018 Share Posted October 26, 2018 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; } Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2018 Share Posted October 26, 2018 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. Link to comment Share on other sites More sharing options...
luuis Posted October 28, 2018 Author Share Posted October 28, 2018 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? Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2018 Share Posted October 28, 2018 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. Link to comment Share on other sites More sharing options...
luuis Posted October 29, 2018 Author Share Posted October 29, 2018 @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? Link to comment Share on other sites More sharing options...
Ingolme Posted October 29, 2018 Share Posted October 29, 2018 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. Link to comment Share on other sites More sharing options...
luuis Posted October 30, 2018 Author Share Posted October 30, 2018 21 hours ago, Ingolme said: Since you're using a stylesheet that somebody else built, No, I don't Link to comment Share on other sites More sharing options...
luuis Posted October 30, 2018 Author Share Posted October 30, 2018 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? Link to comment Share on other sites More sharing options...
Ingolme Posted October 30, 2018 Share Posted October 30, 2018 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 31, 2018 Share Posted October 31, 2018 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. Link to comment Share on other sites More sharing options...
luuis Posted November 3, 2018 Author Share Posted November 3, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 3, 2018 Share Posted November 3, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now