Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

Using the universal selector

Andrea Arbogast | 28 April 2006

The CSS universal selector, denoted by the asterisk (*), selects any element in the document. Using it in combination with other CSS selectors can lead to some powerful results. I have listed two of my favorite techniques here.

Global white space reset

To control all my text spacing, I start off my CSS documents with this code, known as the "global whitespace reset":

* { margin: 0; padding 0; }

This takes away all the spacing between and around elements at once, allowing me to then declare all my own values.

Working around box-model hacks

If I have a fixed-width container and want some padding around elements within it, I often use this CSS:

#container { width: 500px; } #container * { margin: 0 15px; } #container * * { /* Make sure there a space
between the two universal selectors */ margin: 0; }

The second rule puts a margin around all the children of the container div. The third rule removes the margin from any children of the children (e.g.

  • ). This allows me to get around using a box-model hack for IE without having to add an extra containing div to my markup.


    About the Author

    I am a web developer now living in Beijing, China. My day job is turning graphic design into standards compatible pages, service for Yahoo! China. In my spare time I blog about web standards, translate some English article into Chinese, promote web standards in China.

    Articles by Andrea Arbogast


    | Post a comment | Comments Feed

    1. Kevin LawverKevin Lawver�s site :

      28 April 2006, 10:45 : Permanent link to comment

      Please don’t tell people to use the global selector to turn off margin and padding on everything. Why? What if you happen to use a block quote? Do you then go back and restyle every possible HTML element that might end up on the page? I think this practice usually results in more CSS than people think it saves them. I can see doing it for a few select elements, like h1-6 and maybe lists, but for everything? It just seems counter-productive.

    2. Matthew PennellMatthew Pennell�s site :

      28 April 2006, 10:51 : Permanent link to comment

      I never thought about using the universal selector as a way to apply ‘padding’ to all child elements – great tip!

    3. paul hainepaul haine�s site :

      28 April 2006, 11:54 : Permanent link to comment

      Using the universal selector to turn off margins and padding on everything can be great when you’re building the site, and getting much more consistency across browsers, but as Kevin points out, it’s a bugger when you suddenly find you have to keep going back to your CSS and adding the margins and padding back for each element…

    4. Andrea ArbogastAndrea Arbogast�s site :

      28 April 2006, 12:02 : Permanent link to comment

      @ Kevin & Paul: I usually follow the global whitespace reset with default declarations for most of the elements I will use. I find this easier and more consistent; ymmv of course.

    5. Maniqu�Maniqu�s site :

      28 April 2006, 12:09 : Permanent link to comment

      I use the universal selector trick to turn off padding, but I never thought it could be used to re-apply margins to the all the childs of a container.

      Great tip! Thanks.

      @Paul and @Kevin

      Correct me if I’m wrong:
      a more complete Global White Space Reset implies re-applying the “original” paddings and margins by adding a few more rules after the universal selector rule.

      Something like this:
      h1, h2, h3, h4, h5, h6, p, pre,
      blockquote, label, ul, ol, dl, fieldset, address {
      margin: .25em 0;
      ul {
      list-style: square;
      li, dd, blockquote {

      margin-left: 5%;
      form label {
      fieldset {
      border: none;
      padding: .5em;
      input, select, textarea {
      font-size: 100%;

      Thanks and excuse my english

    6. KevinKevin�s site :

      28 April 2006, 12:59 : Permanent link to comment

      I mostly need to reset margin/padding on headings and list items, but not all lists, so I just keep a selector at the top of my stylesheet that looks like this:

      h1, h2, h3, h4, h5, h6, ul.nav, ul.nav ul, ul.nav li, #menu {

      margin:0; padding:0;

      And add to it as I find selectors I need to remove margin and padding from. It cuts down on repeated code, and keeps my files smaller.

    7. Brad FultsBrad Fults�s site :

      28 April 2006, 13:47 : Permanent link to comment

      Note that the #container * selector actually matches all descendants of the container, not just all children.

      Then the #container * * rule matches all descendants of descendants, which translates, eventually, to all 2nd-and-higher generation descendants of the container.

      This may be a necessary evil in some cases when IE6 support for the style is necessary, but it also might be grossly inefficient depending on the CSS parsing and layout engine.

      Browser vendors including at least Mozilla, have discouraged (ab)using universal selectors in situations such as this.

    8. Sumeet WadhwaSumeet Wadhwa�s site :

      28 April 2006, 14:34 : Permanent link to comment

      very handy information…thanks

    9. Andrea ArbogastAndrea Arbogast�s site :

      28 April 2006, 15:49 : Permanent link to comment

      @Brad: Yes you’re right. The article should say “descendants” rather than “children”. And that is actually what makes the selector so powerful.

      As to your other point, I have been using this technique for a while and haven’t noticed any performance issues, but again ymmv.

      Aside: The doc you point to also discourages the use of the descendant selector—it would be a bit of a challenge for me to put together a site avoiding that one! :)

    10. Ole HansenOle Hansen�s site :

      28 April 2006, 20:23 : Permanent link to comment

      Please note that the page linked to by Brad Fults is not intended to apply to normal CSS for the web. It is quite specifically aimed at the CSS used to style the Mozilla-based User Interface, which operates under very different constraints from those of a web page.

    11. EgorEgor�s site :

      28 April 2006, 22:26 : Permanent link to comment

      Dang, why didn’t I think of this before! Thanks for the excellent tip, Andrea.

    12. John OxtonJohn Oxton�s site : http://bitesizestandards

      28 April 2006, 22:36 : Permanent link to comment

      @Kevin: “Please don�t tell people to use the global selector to turn off margin and padding on everything. Why?”

      Because when you are working inside a complex UI sometimes it is the right answer.

      “What if you happen to use a block quote? Do you then go back and restyle every possible HTML element that might end up on the page? ”

      Yes. And if you are like me you are obssesive about styling every element of the UI anyway, so it’s not big deal.

      “I think this practice usually results in more CSS than people think it saves them.”

      Overall, I agree with your concerns and am careful about using global whitespace reset just for the sake of it but I have found a lot of times where it just makes sense to do it.

    13. BrownspankBrownspank�s site :

      28 April 2006, 22:53 : Permanent link to comment

      I don’t quite get the resistance of other people to the global white-space reset. I’ve found it to be especially useful in situations where margins and/or paddings are inconsistent across browsers. And I (re)apply margins and paddings to most elements, anyway.

    14. Mark J�gerMark J�ger�s site :

      29 April 2006, 04:10 : Permanent link to comment

      Just for those, whose clients still use mac os 9: there is a weird bug in moz1.2.1 (the last for os9) which destroys some form-elements when using * { margin:0;padding:0; } . But I use it nonetheless for most projects. I would never trust default-values of browsers. They are not standardized. A new browser or -version can be 100% standard-compliant and use different default-styles eather way.

    15. TomTom�s site :

      2 May 2006, 00:13 : Permanent link to comment

      Good tips, but I agree with Kevin about turning off margin and padding on everything.

    16. LakshanLakshan�s site :

      2 May 2006, 02:21 : Permanent link to comment

      I love the second tip, great workaround. I normally apply global whitespace reset only for selected set of standard elements in the page..

      Anyway nice tip, thanks again.

    17. Richard@HomeRichard@Home�s site :

      2 May 2006, 07:44 : Permanent link to comment

      dang, I though I had ‘discovered’ the * * selector workaround :-(

      Any idea who the first person to use it was? I’ve been using it for at least a year or so and I don’t remember seeing it written down anywhere before.

    18. david bdavid b�s site :

      2 May 2006, 14:00 : Permanent link to comment

      I agree with John on this one. i turn it off for everthing and the one or two elements that i have to go back and add padding or margin to are no big deal. turning it off and resetting it one a few elements in my experience actually makes it tons easier to make a site pixel for pixel with a comp, becaue i dont have to then figure out what the default browser margin/padding is, i already know, its 0.

    19. SimonSimon�s site :

      4 May 2006, 01:10 : Permanent link to comment

      I have a sneaking suspicion that this particular hack wont work in IE7…

    20. John OxtonJohn Oxton�s site :

      4 May 2006, 03:23 : Permanent link to comment

      can you tell us more Simon? Global Whitespace Reset isn’t a hack anyway but I assume you are talking about the box model bit of this Bite?

  • Commenting is closed for this article.

    © Copyright 2006 Bite Size Standards and Authors