What Does Root Selector Do in CSS
FREE
In the CSS rule, the first part defined is the selector and it indicates to the browser, which HTML element should be selected to apply the rule or properties defined inside the current rule.
All the elements of the HTML code are stored or structured in the form of a tree known as a document tree and CSS selectors use this document tree to get the required element.
The root selector or CSS root selector is a CSS pseudo-class and the highest level of the selector which targets the highest level parent or basically, the root of the document tree.
As CSS is the styling language and can be used with various types of markup languages such as HTML, SVG, XML, etc. Regardless of the language, the CSS root selector always targets the root element or the highest parent of the tree for each language.
For example, while using CSS with HTML root selector is equivalent to the highest parent that is, the HTML tag itself. Also, it is equal to <html> selector but the root selector has more specificity as compared to it.
Syntax
We have seen the basics of the root selector. Now let’s see the syntax of the CSS root selector:
In the above syntax, we have used the colon (:) before the root, which indicates that it is the pseudo-class CSS property and the root in CSS is defined in this way.
Cross-Specification
CSS or Cascading Style Sheets is a markup language used to provide styling to documents written in various markup languages like HTML, XML, SVG, or XHTML. As we have seen above, the CSS root selector pseudo-class targets the highest parent in the tree of the document, for HTML it is HTML tag. Similarly for the SVG, it is the SVG tag.
But, the root selector have always a higher specificity as compared to the others.
Example:
In the above code, we have filled yellow color in the document not pink, because SVG has low specificity as compared to : root.
Practical Uses
As we have seen in the above article, the root selector is similar to the html tag in HTML. We can perform every operation we perform of root in CSS using the html tag.
However, as the specificity of the CSS root selector pseudo-class is high as compared to HTML tag, it provides some more functionalities such as declaring the global variables in CSS (we are going to see global variables later in this section).
As it is a pseudo-class selector this means its specificity is equal to that of a class and higher than elements of the HTML. Let's see a particle use of : root selector:
Declaring global variables in CSS: A CSS code can be thousands of lines and it may be hard to handle it. To make it a bit easy there is a concept of global variables in CSS. These global variables can be declared using the (--) double hyphen before the variable name and we can define some value for them. For example, let's say the main color theme of our website is red, so we can define a variable --main_color and provide it a value red that can be used later in code and --main_color is easy to remember as compared to #ff0000 that it the color code for red color.
Using the root selector or root in CSS we can define a global variable in CSS that can be used later in the code. We will see an example of declaring global variables in the next section.
Examples
We have seen the basics of the CSS root selector, now let's see the implementation of the CSS root selector in examples:
Declaring global CSS variables
To declare a global CSS variable we are going to use the double hyphen (--) before the name of the variable in the root in CSS and will get its data using the var() function.
Code:
Explanation: In the above code, we have declared a global variable main_color using the root selector and in the next section, we have retrieved the variable using the var() function.
Set the background color for the HTML document
To set the background color for the HTML document, we are going to use the background-color property to set color and use the root selector as the selector because the root in CSS is equivalent to the HTML tag and will cover the document.
Code:
Explanation: In the above code, we have defined the background color for the entire document using the background-color property and root selector.
Conclusion
- All the elements of the HTML code are stored or structured in the form of a tree known as a document tree and CSS selectors use this document tree to get the required element.
- The root selector or CSS root selector is a CSS pseudo-class and the highest level of the selector which targets the highest level parent or basically, the root of the document tree.
- CSS is a markup language used to provide styling to documents written in various markup languages like HTML, XML, SVG, or XHTML, and irrespective of markup language root selector always select the root element of the document tree.
- Using the root selector we can define a global variable in CSS which can be used later in the code by the name itself.