CSS: *html #id_name

Question

I have this code

*html #alertBox {
    height:100px;
}

#modalContainer > #alertBox {
    position:fixed;
}

is this supported by css, i found this code in some other site(I forgot the link)

Answer 1

This is known as the star HTML hack and is useful in helping you pass certain CSS rules to older versions of Internet Explorer.

So the first example will only set the height of #alertBox to 100 pixels if the browser that is used is susceptible to the star HTML hack:

The second example (#modalContainer > #alertBox) will be applied to any element with an ID of alertBox which is also a direct child of another element that has an ID of modalContainer.

The markup would have to look something like this:

<div id="modalContainer">
    <div id="alertBox"></div>
</div>

and not this:

<div id="modalContainer">
    <div>
        <div id="alertBox"></div>
    </div>
</div>

Both of these rules are valid CSS.

Answer 2

*html #alertBox {
    height:100px;
}

That's a mistyped star-HTML. Star-HTML is a CSS hack usually used to target rules at IE6.

The star-HTML prefix in a rule shouldn't match anything, because there is no element (*) above the root element (html). But it does in IE up to version 6 due to bugs in that browser.

However for this to be a valid rule, there must be a space between the * and the html. The current code is invalid CSS: the validator will complain and browsers might do unexpected things with it. As it happens, in the current crop of browsers there is no difference: IE6-7 allows the spaceless syntax, the others ignore the whole rule. But you shouldn't really rely on that.

#modalContainer > #alertBox {
    position:fixed;
}

That's a child selector: it selects the alertBox when it's a direct child of modalContainer.

> is something IE6 doesn't understand at all, so the consequence is to target the rule at all browsers except IE6 (which doesn't support position: fixed). This makes it more-or-less the opposite of the star-HTML hack. Clearly it is being used for the purpose here, as otherwise the selector, including two unique IDs, is quite redundant.