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

Question

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 t

Answer 1

For HTML documents, there is no difference - your root element is the 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.