CSS ... be careful when using wildcard *

November 3rd, 2007

I was working on a project today and found that the content in a table I created all squeezed together, even though that I had set “cellspacing=10”.

After some investigation I found that in the CSS code, padding and margin of all elements was removed:

body * {
margin: 0;
padding: 0;
}

I could, in theory, define a table with padding. But setting margin and padding to 0 for all elements is not a great idea in general. Unless you DO want to define style of ALL element by hand.

A better approach is to be specific only to specific elements.

Similarly, I noticed that on many website, just because ul is used for navigation items, the “list-style” is changed in general:

ul li {
list-style:none;
....
}

Doing this will cause all unordered-list to lose the bullets unless you define another style.

A better approach is to be specific:

#nav ul li {
list-style:none;
....
}

Please add your comment