Replacing universal selectors

Hi everyone:

I want to replace a universal selector on this mini project, but don’t know how…

The line of code I want to replace is this one that is at the top in the CSS. And I attach the rest of the project for reference:

​*, *​:after, *:before {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

And the project is here: http://codepen.io/CarolinaSawney/pen/RWdoJP

Thanks!

Hi,

Why do you want to replace that rule?

That rule is in order to allow all the elements you use to use the box-sizing:border-box model as opposed to the standard content-box model (the default).

If you want to use the standard content-box model then just remove the whole rule.

It seems that you have no elements in your demo that will utilise that rule anyway so removing it should make no difference to your demo.

If you do want to use the border-box model on certain elements then just apply the rule to the selected elements as required.

e.g.

.test{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
 box-sizing: border-box;
}

Of course you will only notice a difference where you have defined dimensions and padding/borders. If you have no dimensions applied then you won’t notice a difference and even if you have dimensions applied but no padding or borders then again there is no difference.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.