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
Using the universal selector
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.
References
- W3C CSS specs: Universal Selector
- Meyerweb: The Universal Selector
- Left Justified: Global white space reset
20 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
Kevin Lawver
: http://lawver.net
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.
Matthew Pennell
: http://www.thewatchmakerproject.com/
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!
paul haine
: http://joeblade.com
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…
Andrea Arbogast
: http://interllectual.com
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.
Maniqu�
: http://www.exaudi.com.ar
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:
margin-left: 5%;h1, h2, h3, h4, h5, h6, p, pre,
blockquote, label, ul, ol, dl, fieldset, address {
margin: .25em 0;
}
ul {
padding-left:1em;
list-style: square;
}
li, dd, blockquote {
}
form label {
}
fieldset {
border: none;
padding: .5em;
}
input, select, textarea {
font-size: 100%;
}
Thanks and excuse my english
Kevin
: http://lawver.net
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.
Brad Fults
: http://h3h.net/
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.
Sumeet Wadhwa
: http://www.designstage.net
28 April 2006, 14:34 : Permanent link to comment
very handy information…thanks
Andrea Arbogast
: http://interllectual.com
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! :)
Ole Hansen
:
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.
Egor
: http://www.roomplay.com
28 April 2006, 22:26 : Permanent link to comment
Dang, why didn’t I think of this before! Thanks for the excellent tip, Andrea.
John Oxton
: 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.
Brownspank
: http://www.brownbatterystudios.com/sixthings
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.
Mark J�ger
:
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.
Tom
: http://www.tomstardust.com
2 May 2006, 00:13 : Permanent link to comment
Good tips, but I agree with Kevin about turning off margin and padding on everything.
Lakshan
: http://laktek.blogspot.com
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.
Richard@Home
: http://richardathome.wordpress.com
2 May 2006, 07:44 : Permanent link to comment
dang, I though I had ‘discovered’ the * * selector workaround :-(
http://richardathome.wordpress.com/2006/04/24/semantic-column-markup-redux/
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.
david b
: http://climaxdesigns.com
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.
Simon
: http://www.seikadojo.co.uk
4 May 2006, 01:10 : Permanent link to comment
I have a sneaking suspicion that this particular hack wont work in IE7…
John Oxton
: http://johnoxton.co.uk
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?