: root css meaning code example

Example 1: use of root in css

:root can be useful for declaring global CSS variables:
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

Example 2: :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 */
}

Tags:

Css Example

Recent Posts