What does the CSS trick *+html do?

Question

In a project I work with I have spotted a lot of rules like this:

* + html {
    /.../
}

I know what * and + do, but I don't get what is the point of having this construction?

I have also spotted this one:

* html {
    /.../
}

I couldn't find any place where these are applied.

AFAIK html is unique per page, so why not simply use the html selector? Is this some kind of magic?

"Is this some kind of magic?" It certainly is! Dark Microsoft magic — Paul D. Waite
– Paul D. Waite, Commented Jun 27, 2013 at 8:17

keaukraine · Accepted Answer · 2013-06-27 08:12:23Z

14

These are CSS hacks for Internet Explorer.

More information here: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

answered Jun 27, 2013 at 8:12

keaukraine

5,37333 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arkana Over a year ago

More info in support of this answer: a testcase to compare some of these hacks: bongard.net/tools/css-hack-testfile

feeela Over a year ago

@Andy * html is an IE 6 hack, who talked about IE 7?

Paul D. Waite · Accepted Answer · 2013-06-27 08:28:38Z

12

According to W3C Selectors definition, the "E + F" is defined as:

Matches any F element immediately preceded by a sibling element E.

You mentioned the code:

* + html

This should match the html tag right after any other element. But the html element is the first element (root element) of a html page. So, there is no element (i.e. HTML-tag) right before the html-tag, the rule doesn't match any element.

At least, for any browser, that implements the standard correctly. The "problem" is, IE7 doesn't implement it correctly and applies the rules.

In other words, this is a CSS hack to target IE7.

Another way would be to use conditional comments:

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->

HTH

edited Jun 27, 2013 at 8:28

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

answered Jun 27, 2013 at 8:22

Raul Pinto

1,1158 silver badges16 bronze badges

2 Comments

Paul D. Waite Over a year ago

Amen to conditional comments. Slightly less dark Microsoft magic

feeela Over a year ago

+1 Thanks for that useful answer; see also HTML5 Boilerplate for more examples of using conditional comments as browser switch: github.com/h5bp/html5-boilerplate/blob/master/index.html

Collectives™ on Stack Overflow

What does the CSS trick *+html do?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related