Blog

Css Fury : Part 1, The * (star/asterisk) Selector

CSS 2.1 which is supported by Firefox, safari, and almost completely supported by IE 7, has what is known as the selector syntax. However IE 6 only supports a minimal amount of the CSS selectors, with that being said, you should use selectors wisely in such a way that degrades gracefully in older browsers.

Even though CSS have been around for a while, there are people are still using tables for layout design. However the ones forwarding the web, with use of a div layout, are finding new ways and combinations of CSS which results in very cool results. For instance, zeroing out every element on the page with a few lines of code. This does work in IE 6.

* {padding: 0;margin: 0;}

The reason this is so significant is that browsers have different predefined padding, margins for various elements like h2, p, blockquote, ul, li etc. Even IE6 has that evil 3 pixel space between divs. What the above code does is zero the padding and margin on every element for the entire page, thus starting all browsers elements on common ground and forcing you to design a page that has a cross browser look and feel by setting the padding and margins manually.

The * selector (known as the universal selector) matches any single element in the DOM (document object model). So lets say you want to select all spans, even grandchildren inside of a div. It would look like the following.

div * span {background: #ff0000;}

If you use CSS technically youre, already using the universal selector since when you type just a class or id, it implies the * before it. So when you see something like the following…

span {background: #ff0000;}.error {background: #ff0000;}#error-message {background: #ff0000;}

What the parser really sees is ….

* span {background: #ff0000;}* .error {background: #ff0000;}* #error-message {background: #ff0000;}