Any difference between ' :root ' and ' * ' ? Please I need an explanation for each :)

Question

:root{color: red;} *{color: red;}

Answer 1

:root is the root of the HTML document. Not the html tag but higher than that. Sort of like the document itself.
* is the universal selector. It selects all elements, including :root.