Anne van Kesteren


The above can be defined as the CSS :root pseudo-class. This is a general selector for selecting the root element of a HTML/XML document, this isn't the body element!

Probably the most confusing thing is :root in HTML. In HTML, the root element is html, but some of the properties of body must also be applied to the root element. This was done (I believe) for backwards compatibility mode (<body bgcolor="#000000">). This makes things extremely complicated, since in XHTML you should not apply your page background-color to the body element (In HTML, you are encouraged to apply it to the root element, far better IMHO). In XHTML, this can give problems. Jacques Distler and I have discussed this in the comments on <html id=""> and I found answers in comment 8. It appears that the most important bug of the two has been fixed. FYI: don't rely on my workaround in comment 10. It breaks several browsers, including Safari.

Besides the background properties you could also get problems with the overflow property. Lot's of stupid designers want to hide the scrollbars and apply overflow:hidden; to the body type selector. Due a bug in Mozilla: 170011, whole pages become invisible.

Since we currently live in an era where some stupid browser has power, we need to be careful with what we apply. For example: IE doesn't apply background-image (and related) to the html type selector. You can apply all the other styles to that type selector AFAIK.

Some quotes (we need @viewport or something similar, could also be useful to style scrollbars):

HTML UAs may apply the overflow property from the BODY or HTML elements to the viewport.

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. User agents should observe the following precedence rules to fill in the background of the canvas of HTML documents: if the value of the 'background' property for the HTML element is different from 'transparent' then use it, else use the value of the 'background' property for the BODY element. If the resulting value is 'transparent', the rendering is undefined. This does not apply to XHTML documents.

Why would the CSS2.1 specification recommend such thing?


  1. Just for clarity: Both the bugs referred to in comment 8 of the older post have been resolved (one fixed, one not a bug) and it's unclear whether bug 170011 is really a bug or not; the bug report is open awating CSS WG clarifcation on the issue.

    Posted by jgraham at

  2. It seems a logical resolution that if the HTML document does not have background colour defined via the <html> element then it will use the value defined via CSS for the <body> element, assuming there is one.

    Posted by Robert Wellock at

  3. Perhaps, but it isn't logical that they recommend setting it on the <body> element. But that is just my opinion. Besides, if it was correctly supported (in Internet Explorer for example) I could have made sites without div elements!

    Just styling the body...

    Posted by Anne at

  4. It is logical, because they know that styling html breaks some older browsers, whereas some person reading the spec (in principle) might not know that. Therefore recommending the slghtly-less-pure-but-universially-supported method allows the spec to be useful to real people, rather than just being a source of markup ideology

    Posted by jgraham at

  5. Stupid browsers, stupid designers... We are doomed.

    Posted by G. I. at