Check out example codes for ":root css". It will help you in understanding the concepts better.

Code Example 1

/*In HTML4, this is always the <html> element, since it is the highest-level
ancestor of all other elements on the page. So, :root is identical to using the
html as a selector, except that it has a higher specificity.
This means that, in the following example, the styles specified using :root
will override those specified using the html selector, even if the latter
comes next in the style sheet.
In document formats other than HTML, such as SVG and XML, 
the :root pseudo-class can refer to another higher-level ancestor.*/

:root {
    /* style the root element */

html {
    /* style the root element */

Code Example 2

/* Selects the root element of the document:
   <html> in the case of HTML
The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, 

:root represents the <html> 
element and is identical to the selector html, except that its specificity is higher.

:root {
  background: yellow;

Learn ReactJs, React Native from