css :root explanation code example

Example 1: :root css

/*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 */
}

Example 2: :root css

/* 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;
}

Tags:

Css Example

Recent Posts