Asterisk Selector Question

[RayH]

Hi,

I understand how to use an asterisk as a universal selector however when I was viewing my sites CSS I discovered this.

#header ul.toolbar li {
border-right: 2px solid #ad0304;
margin-right: 6px;
padding-right: 6px;
*margin-right: 6px;
*padding-right: 4px;
}


Can any one explain what the * does in this instance?

[Fotiman]

This is a "Star Hack" for IE. IE versions 7 and lower will recognize these rules. So in this example, the padding-right is being set to 6px for all browsers, and then IE7 and under will set it to 4px instead. In this particular case, margin-right is also being set but the IE hack is not actually needed since the value is the same as the previous margin-right value.

[RayH]

Wow that was fast thanks!

That was my first post and I am really impressed by the response time and the clarity of your answer.

Thanks again!

[Fotiman]

Ah, I didn't even notice it was your first post, else I would have said Welcome to WebmasterWorld! :) Glad you found that useful.

Note, you might also notice cases where an underscore is used. As in:

padding-right: 6px;
*padding-right: 4px;
_padding-right: 2px;

The underscore version is recognized by IE6 and under, but not by IE7. So in this example, you'd be defining 6px padding for all browsers, then 4px padding for IE7 and under, then 2px padding for IE6 and under. Note, the order that you define them in is important.