Gab

Skip to site navigation. Skip to content.

Wednesday, November 17, 2004

The Universal Selector

Introduced in CSS 2.0, the universal selector, displayed as an asterisk (*), assigns a property or properties to all elements in a document. For most of the block elements in my examples, the following properties have been given:

body {
    margin: 0;
    padding: 0;
}

It would be redundant to apply the previous styles to most of our document’s elements. Give all elements, or rather, do not give any element margins or padding. Then if a particular element needs a little padding here and another element needs a top margin there, it can be added as needed. This is where we use the universal selector to do the job.

* {
    margin: 0;
    padding: 0;
}

This is also a great way to reduce the style sheet’s filesize.

What? Problems?

Unfortunately, if you want to be nice to Mozilla-based browsers, you can’t get away with just using the universal selector to set margins and padding to zero. When using form elements, <select>s and <option>s in particular, you must put back a default browser style. I looked through the forms.css file included in Mozilla’s Firefox browser and found the following style:

select > option {
    padding: 0 5px 0 3px;
}

So far, this has been the only “glitch” in using the universal selector to zero out margins and padding. If anyone else finds other elements affected, please let me know. And if I discover any affected elements, I will be sure to let you know.

Leave A Comment

Remember My Details