CSS :root Selector with Example
The :root selector in CSS is a pseudo-class that selects the root element of an HTML document, which is always <html> element.
In other words, the :root pseudo-class selects the first element in the document. However, you do not use this selector very often.
The general syntax to use :root selector is as follows:
:root {
/* CSS properties */
}Let’s take an example in which we will set the background color for the HTML document.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
background: #ff00ff;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
In this example code, the :root is a pseudo-class selector that selects the root element of the document, which is the <html> element in the code. This selector sets the background color to a bright magenta color (#ff00ff) for the root element.
Here, the background color of the <html> element will only be visible if the <body> element doesn’t have its own background color or other elements don’t cover the entire viewport.
Why Use :root Pseudo-Class in CSS?
1. Centralized Style Management:
The :root pseudo-class selector in CSS is used to define custom properties, also known as CSS variables. These variables store values such as colors, fonts, spacing, etc. We apply these properties throughout the document using var() function.
If you want to update the primary color, font size, or spacing throughout the entire project, you only need to update the value in the :root selector. The change will automatically reflect across all elements that use these variables.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
/* Defining variables to store values.*/
--primary-color: #3498db;
--secondary-color: #2ecc71;
--background-color: #f5f5f5;
--font-family-base: 'Arial', sans-serif;
--font-size-base: 16px;
--spacing-small: 8px;
--spacing-medium: 16px;
--spacing-large: 24px;
}
/* Using variables using var() function. */
body {
background-color: var(--background-color);
color: var(--primary-color);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
margin: var(--spacing-medium);
}
h1 {
color: var(--secondary-color);
margin-bottom: var(--spacing-large);
}
p {
margin-bottom: var(--spacing-small);
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
In this example code, we have used the :root selector to define custom properties (also known as CSS variables). We have created variables like –primary-color, –secondary-color, and –background-color to store color values.
Similarly, we have defined variables like –font-family-base and –font-size-base to store the default font family and font size. The variables, such as –spacing-small, –spacing-medium, and –spacing-large are defined for consistent spacing throughout the document.
After that, we have applied these properties throughout the document using var() function. For the body section, we have set the background color, text color, font family, and font size using the variables defined in :root.
The heading (h1) uses the –secondary-color for its text color and –spacing-large for its bottom margin. Similarly, the paragraph (p) uses the –spacing-small variable for its bottom margin.
2. Improve Maintenance:
It can be challenging to maintain the consistent styling in the large project. With :root selector, you can reduce redundancy and make your code easier to maintain.
For example, you have a large website, and decide to update the primary color from blue to red. Instead of going through every CSS file to change the color code, you simply update the value of –primary-color variable in :root like this:
:root {
--primary-color: #e74c3c; /* Updated primary color to red */
}This update will automatically change the primary color wherever –primary-color has been used. Thus, it saves the time and reduces errors.
3. Ease of Theming:
Suppose your website supports multiple themes like light and dark modes, :root allows you to define variables for each theme, making it easy to switch between them dynamically. Look at the below code.
Example 3:
<head>
<style>
/* Default Light Theme */
:root {
--background-color: #ffffff;
--text-color: #000000;
--button-background: #2ecc71;
--button-text: #ffffff;
}
/* Dark Theme */
.dark-mode {
--background-color: #2c3e50;
--text-color: #ecf0f1;
--button-background: #e74c3c;
--button-text: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
button {
background-color: var(--button-background);
color: var(--button-text);
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<button onclick="switchTheme()">Switch for Dark and Light Mode</button>
<script>
function switchTheme() {
document.body.classList.toggle('dark-mode');
}
</script>
</body>
</html>
4. Responsive Design with :root
You can use :root selector pseudo-class in conjunction with media queries to create responsive designs that adjust variables based on screen size. Look at the given example below.
Example 4:
:root {
--font-size: 16px;
}
@media (min-width: 768px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
}
}
body {
font-size: var(--font-size);
}
In this example, the font size will adjust based on the screen width, ensuring that the text is appropriately sized for different devices.
Best Practices for Using CSS :root Selector
There are the following key points that you should keep in mind before using CSS :root selector pseudo class. They are as:
1. Use meaningful variable names for defining variables in :root style, that clearly indicate their purpose. For example, use –primary-color instead of –color1 to make your code more readable and maintainable.
2. Always try to define correct variable names and start with “–“.
3. Organize your variables logically by grouping related variables together. For instance, keep all color variables in one section and all typography variables in another. This practice makes it easier to find and update variables when needed.
4. Avoid overusing variables because your CSS becomes cluttered and difficult to manage.
5. When you use the var() function to apply variables, always provide fallback values.
6. Test across different browsers for better cross-browser compatibility.
