What is the difference between the pseudo class: root and the * {} in CSS?

Do both have the same function? Both generally define certain procedures. When should I use one or the other?

Author: Luiz Felipe, 2020-03-14
Source

1 answers

No, they do not have the same function.

From wiki W3C :

The pseudo-class :root represents an element that is in the root of the document. In HTML, it will always be the HTML element.

Similarly, if you are in an SVG document, the :root it will be the SVG element. In short, you can use :root to select the highest level element of any document.

O selector *, also called universal selector, will select any element of the document.

See the difference: 

:root {
  border: solid 1px blue;
  background-color: rgba(0, 0, 255, 0.3);
}

* {
  border: solid 1px #FF9800;
  background-color: rgba(255, 152, 0, 0.1);
}
<p>
  <span>Olá</span>, <strong>mundo</strong><em>!</em>
</p>

Note that :root selected only the highest level element of the document. If you open the developer tools, you will see that it is the html element. The universal selector, on the other hand, selected all elements of the page.

Reference:

 2
Author: Luiz Felipe, 2020-03-14 18:52:07