What's the difference between CSS3's :root pseudo class and html?

I can't seem to find much information about this.

Smashing Magazine seems to be saying that html and :root are the same thing but surely there must be a tiny difference?

Felix Kling

From the W3C wiki:

The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element.

CSS is a general purpose styling language. It can be used with other document types, not only with HTML, it can be used with SVG for example.

From the specification (emphasis mine):

This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications).

One technical difference between them is that :root - being a pseudo class has a greater specificity than html (a type selector)

:root {
  color: red
}
html {
  color: green;
}

<div>hello world</div>

So, in the above example, the :root selector overrides the html selector and the text appears red.

For HTML documents, there is no difference - your root element is the <html> tag, so html{} and :root{} are (besides from a difference in specificity) semantically equivalent.

However, you can apply CSS not only to HTML, but all XML-like documents. That's why :root is there - to target the document's root element regardless of document type. Most people are confused by the difference because the overwhelmingly predominant use case for CSS is styling HTML documents.

Example: You can style SVG documents with CSS. When styling it, your root element will (obviously;-)) not be html but svg. See the following list of SVG tags.

来源：https://stackoverflow.com/questions/15899615/whats-the-difference-between-css3s-root-pseudo-class-and-html

标签

css

css3

css-selectors

pseudo-class