12 replies [Last post]
kumakumasan
Offline
Regular
Last seen: 3 years 49 weeks ago
Timezone: GMT-7
Joined: 2008-10-10
Posts: 27
Points: 14

I know this is an easy question, but if you don't know, you don't know (and try searching google for "*")

My guess: same as !important?

Thank you!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 18 hours 15 min ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3569
Points: 674

kumakumasan wrote:I know

kumakumasan wrote:

I know this is an easy question, but if you don't know, you don't know (and try searching google for "*")

My guess: same as !important?

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

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

kumakumasan
Offline
Regular
Last seen: 3 years 49 weeks ago
Timezone: GMT-7
Joined: 2008-10-10
Posts: 27
Points: 14

Thank you very much for your

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 4 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Quote:(and try searching

Quote:

(and try searching google for "*")

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

But in the Yahoo code it's

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;

Terrible code, I'm not sure what the hell it's trying to do here.

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.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 4 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Poes this is getting ever so

Poes this is getting ever so slightly off tangent. Smile

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Is it? That's what I

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.

I'm no expert, but I fake one on teh Internets

kumakumasan
Offline
Regular
Last seen: 3 years 49 weeks ago
Timezone: GMT-7
Joined: 2008-10-10
Posts: 27
Points: 14

Thanks for all the

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 don't think it's an IE hack because when I take off the "*", it changes (drastically) in Safari and Firefox.

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

Please help Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 weeks 18 hours ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

That's exactly why it may be

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.

kumakumasan
Offline
Regular
Last seen: 3 years 49 weeks ago
Timezone: GMT-7
Joined: 2008-10-10
Posts: 27
Points: 14

Ah, you're right! I guess

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 4 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

I hadn't really taken note

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I'm not surprised in the

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.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 4 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Sadly even among those who

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: Sad

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me