Pseudo- classes in CSS: Styling the :root of a Document

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.

Leave a Reply

Your email address will not be published. Required fields are marked *