CSS :root Selector

CSS :root selector allows you to select and style the root element of the document. In HTML, the root element of the document is the <html> element.

However, since CSS is a styling language which can be used with other document formats such as XML and SVG as well. In that case, the :root selector can refer to other elements but it will always be referring to the topmost element of the document.

Since the topmost(root) element in case of HTML is always the <html> element. So, CSS styles added under the :root selector will always style the <html> element.

See this example:

Example:

:root{
   background-color: yellow;
}

The :root selector is equivalent to the html{} selector and both target to the same element. But, the :root selector has a higher specificity than the html{} selector.

This means the :root will overwrite the styles specified by the html{} selector.

See this example:

Example:

:root{
   background-color: yellow;
}
html{
    background-color: red;
}

CSS Syntax

The syntax of the :root selector is as follows:

:root{
    CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :root selector.

Selector
:root4.09.03.53.29.6

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.