*html hack

[earth2mac]

I've tried to use this but need exact understanding of how to write it out.

Is there a space or not between the "*" and "html" or not or does it matter? It seems to work either way?

[WebJoel]

I've always used a whitespace. At any rate, makes it easier to read.

[earth2mac]

so it doesn't matter either way?

[Jeff Mott]

Doesn't matter.

[Centauri]

I think it does matter, as the line is supposed to be interpreted as "an element within element "html", which is then contained within any other element (the *) - the space indicates that the next object is a child, so the space will be required to make it work.

[Jeff Mott]

Well... no. The whitespace is just optional whitespace, as most whitespace is in computer languages.

You can check the CSS spec ( http://www.w3.org/TR/CSS21/syndata.html#tokenization ). The rule "S*" is used, which means zero or more whitespace characters. You can also make a test page and open it in IE to see what happens.

<style type="text/css">

*html body { background-color: red }
/* no whitespace between "*" and "html";
* IE6 will be red; most everything else won't */

</style>

The "*html" portion of this selector reads: match any html element that is a descendant of any element. Normally this shouldn't select anything... ever, because the html element should be the root node, and the root node isn't a descendant of anything. But IE6 and earlier has a phantom node above the html element. So in IE6, the html element isn't the root node; some un-named node is. (The * matches the phantom un-named node.) And that's why IE6 will match this selector while everything else won't.

[Centauri]

Jeff,
The link you gave did not really clear anything up for me....

Going to the next section in the css specs, we find :5.5 Descendant selectors

At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by whitespace. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

Example(s):

For example, consider the following rules:

h1 { color: red }
em { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>

We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:

h1 { color: red }
em { color: red }
h1 em { color: blue }

The third rule will match the EM in the following fragment:

<H1>This <SPAN class="myclass">headline
is <EM>very</EM> important</SPAN></H1>

Example(s):

The following selector:

div * p

matches a P element that is a grandchild or later descendant of a DIV element. Note the whitespace on either side of the "*" is not part of the universal selector; the whitespace is a combinator indicating that the DIV must be the ancestor of some element, and that that element must be an ancestor of the P.
The blue highlighted parts would suggest that there should be a space, whether it does actually work or not....

[felgall]

There must be whitespace bbetween selectors as otherwise they will be considered to be one selector and there is no such selector as *html. This will only make a difference in IE6 and earlier as they are the only browsers where html is not the top element and for all other browsers you can't have html inside of anything so * html will be ignored except for IE6-.

[Jeff Mott]

I think you're right, Centauri. That core syntax I linked to seems a bit generic I suppose, and I'm definitely more inclined to trust the plain english description.

So, earth2mac, while the space may not matter for the holly hack in IE, it should matter, and in most other cases, it will matter. So it's good to simply get into the habit.