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

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

Amen to conditional comments. Slightly less dark Microsoft magic
+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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related