One pseudo-class you often see in CSS snippets and demos is the :root pseudo-class. The :root pseudo-class matches the root element of the document. When working with HTML, this matches the <htmL> element. For SVG documents, it’s the <svg> element.
You might choose :root over htmL if you need to define a set of custom properties (variables) for a stylesheet that will be shared across HTML and SVG documents. The following example uses :root and custom properties to define a color palette:
:root {
–color-primary: blue;
–color-secondary: magenta;
–color-tertiary: yellowgreen;
}
Linking this stylesheet from an SVG or HTML document makes these properties available for use with either in a way that using htmL as a selector doesn’t.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.