What does "*" mean in front of a property?

No. * is the universal selector. It means "every element". It can also be used to specify all the children of a specific selector, so if you have a class named "blit" then
".blit *" refers to every element that is a descendant of ".blit."

It was commonly used as a hack for IE since that browser treats "* html" as refering to the "html" element, whereas compliant browsers ignore that as they should since "html" is a root node and the child of nothing. So a rule on "* html h1" will apply to an h1 element in IE and can be used to feed it a special IE only rule.

However that particular hack should be avoided these days in favour of IE conditional comments.

See http://reference.sitepoint.com/css/universalselector

Thank you very much for your reply.

The "*" comes up quite a bit in the YUI (Yahoo's library). The CSS I'm trying to figure out is different than the examples you gave. Here's an example:

.yui-skin-sam .yui-carousel-nav ul {
    float: right;
    margin: 0;
    margin-left: -220px;
    margin-right: 85px;
   *margin-left: -160px;
   *margin-right: 0;

So if I understand you correctly, there are 3 ways to use the "*":

1. This would give a border to ALL elements (that could take a border property).

* {
border: 2px solid;
}

2. This would give a border to all descendant elements of "myClass" (but NOT myClass itself).

 .myClass * {
border: 2px solid;
}

3. Third case is the one I'm not sure about...

Thank you very much!

Did you try 'CSS selectors' ?
The method that eludes you in Ed's description is possibly the 'star selector hack' a method of feeding rules to <=IE6 . It worked due to IE getting the dom nodes in a muddle the top most node is 'html' nothing appears higher than this it's the root node however do this '* html #somediv {}' and IE6 will read the ruleset where in reality the whole ruleset should be dropped, and which correctly behaving browsers duly observe.

As a point of mild interest technically the correct method of writing a class or id is with the universal selector prepended thus '*.className'; as a class written as a standalone ruleset is meant to be applicable to any element, however this is nearly always shortened to simply the class which is perfectly valid.

But in the Yahoo code it's not being used as a selector.

.yui-skin-sam .yui-carousel-nav ul {
    float: right;
    margin: 0;
    margin-left: -220px;
    margin-right: 85px;
   *margin-left: -160px;
   *margin-right: 0;

My best guess for this one is a funny version of the \ or _ hack for IE5 and below.

In the old days when the hack described above (* html) was being used, it targetted IE6 and below. When IE5 and 5.5 were still in the game this was a problem if IE6 was acting properly (for instance, in "standards" mode IE6 obeys the box model pretty well while IE5 never does).

So a group of hacks were found which would initially send the code you wanted to IE5, and then the "correct" code for IE6. Usually something was placed before a word or in a word (you couldn't comment out before the letters a-f I think it was) to stop IE5 from seeing it. IE6 had no problems.

It looked like:
#element {
width: 400px;
padding: 0 10px;
}
This box now has a total width of 420px, except in IE5.5 and below where it's still 400px (broken box model).

So we fix:
* html #element {
width: 420px; <--for less than and equal to IE6
_width: 400px; <--for IE6 alone
}

or

* html #element {
margin-left: 5px;
ma\rgin-left: 0;
}

IE6 can disregard "crap" in the declaration while IE5.5 and below could not. So, I'm wondering if the
*margin thing is something like _margin in this case?
If it is, it's not one I would use simply because the * really is a selector while _ and \ mean nothing.

Poes this is getting ever so slightly off tangent.

You sound as though you are describing the sbmh hack; this used the escape method to show two different width values to IE. There were several versions of the general Tan hacks, they tended to use comments or escapes to hide rules rather than the underscore. Anyways this is too an extent all ancient history

Is it?

That's what I thought this was:
*margin-left: -160px;
*margin-right: 0;

I mean, that's not a selector, so what is it? It does look like that old hack to me.

Thanks for all the replies!

I'm still unclear what is going on here:

.yui-skin-sam .yui-carousel-nav ul {
    float: right;
    margin: 0;
    margin-left: -220px;
    margin-right: 85px;
   *margin-left: -160px;
   *margin-right: 0;
    padding: 0;
}

I do agree with you that it's terrible code, or at least extremely hard to follow.

Please help

That's exactly why it may be an IE hack. Safari and Firefox are ignoring the declaration because it's invalid, while IE may overruling the first margin value with the second, ignoring the *

At any rate, it's bad practice and should be avoided.

Ah, you're right! I guess the proper test would have been to completely remove the line; doing so resulted in no visible change to my layout.

Thank you very much!

I hadn't really taken note of that abomination ( *property:value; )replying as I was to the star selector filter point.

Yes this is a perfect example of a hack in the worse sense of the word, certain 'hacks' we know and accept to be a necessary evil i.e the 'star selector hack' (preferably referred to as a 'filter' to set it apart from dirtier hacks) the star selector is acceptable (just) due to the fact that it has a proscribed nature, the specs clearly state that there can be nothing above the root node 'html' and in such a case where something attempts to address an element higher CSS is clear on the action the ruleset will be ignored, this will always remain the case so the fact that IE6 breaks that rule is a behaviour that can be relied on not to change in either the specs approach or IE6 so in a sense it's 'safe'; on the other hand the specs make no reservation for the character '*' before a property, it's not legal so the normal approach is to drop the property declaration, the problem lies in the fact that there has been no reservation or proscribed behaviour attributed to this arrangement which means possibly in the future the specs will decide to make use of a asterix in this fashion in which case all old pages that have used this approach to hack their pages will possibly break horribly?

I'm slightly amazed that the YUI uses this, but also perhaps not that surprised, one thing it firms up with me is that I have no need or desire to explore these css frameworks and I don't think I have ever really thought that they were a terribly good idea.

I'm not surprised in the least. The more I hear people talk about how awesome Yahoo's thingies are, the more I cringe. It's terrible-- that reset of theirs is an abomination unto Gawd, worse than Eric Meyer's (at least he knows why he's using all those selectors), and their own sites are surely nothing to brag about.

Extra sad: Yahoo frameworks, resets, and widgitty-tool-thingies are incredible popular and are getting moreso. I met these two Dutch guys at the Perl conference in an HTML talk who couldn't stop gushing about how awesome YUI was. I nearly barfed, but managed to hold it in long enough to introduce them to the * margin and padding reset (and warned them about forms, yesh, but that's only padding anyway). 90% of what was in their resets, they didn't even have those HTML elements anyway. Waste.

Sadly even among those who purport to be web developers, there is a desire for a copy and paste approach nowadays to coding, it's staggering the amount of people who latch on to provided tools, stuff like these frameworks, I guess it replaces having to put some actual work in having to learn something, makes me mad it does :curse: