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

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.