Pseudo-class assignment: root

Question

I just found a pseudo class :root.

Snippet: root CSS alias corresponds to the root element of the tree representing the document. Applies to HTML ,: root represents the element and is identical to the html selector, except that its specificity is higher.

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

What exactly is it used in? Why has anyone ever used it aside from higher specificity when you can just use a selector html?

Answer 1

The answer is here:

except that its specificity is higher.

And why is this important?

In a regular CSS script, if you have something like this:

html {
    background-color: red;
}

html {
    background-color: blue;
}

, . .

:

:root {
    background-color: red;
}

html {
    background-color: blue;
}

. .

, , html, . !important, , , , , :root.

---

@user2864740 @13ruce1337, CSS HTML, XML-, XML, SVG XUL. :root .