Universal Selector ‘*’ Reset



When first approaching the CSS Reset method, it seems to many that the easiest way to reset styles is to use the “universal selector” to set the margin and padding on all elements to zero – as well as any other properties specified – with only a few lines of code. As you shall see, this pint-sized CSS Reset is fraught with problems…

At its most basic, the Universal Selector CSS Reset looks like this:

* {
	margin: 0;
	padding: 0;
}

This diminutive CSS Reset employs the universal selector (*) to reset the padding and margins on all elements to zero. It is often expanded to include border: 0; outline: 0 to also reset these values to zero, nada, zilch. The implications of this can be huge, and so this method should never be used unless you know exactly what to expect…

Click to jump to some code examples & scripts, or keep reading for some discussion

8 thoughts on “Universal Selector ‘*’ Resetadd yours
  1. Your claim about IE6 & 7 not supporting * is incorrect. The above star selector usage works perfectly in those browsers. If you read the page you linked to you would have seen that it’s the fact those browsers support selectors such as * html { ... } that cause their implementation to be classified as buggy.

    • Hey Andy, thanks for stopping by and for the heads up – I’ll update the article to reflect your efforts. Please let me know if you spot anything else!

      Cheers,

  2. Do you mean that the using of Universal Selector Reset shall be abandoned?

    • Joss said: #

      I think best to avoid it, yeah – for high speed website development (prototypes etc) it is suitable, but probably best to not use on complex or big websites!

  3. I recall that the universal selector is the least specific of all selectors so I’m not sure where the notion of it overriding parent inheritance came from…?

    • Henrik Hjerppe said: #

      It is less specific than say a p or div selector, but it is on the same “level” in the hierarchy. So yes, it will override parent inheritance whenever it will match the child element directly — which is to say ALWAYS, since it matches every possible element.

  4. I apply the more comprehensive example in my CSS file. It works properly.
    Thank You Will.

  5. a nice post, I used the second script. It’s working!
    Also in IE 9 and 10
    Thank you Joss.

Leave a reply to Will Morgan
this will never be published
@