The :root CSS pseudo-class is designed to select the root element within a document’s hierarchical structure. When applied to HTML, :root specifically points to the <html> element and behaves similarly to the `html` selector. Nonetheless, it’s worth emphasizing that :root possesses greater specificity when compared to `html`. This selector includes all HTML elements or tags.
Using :root can be advantageous when declaring global CSS variables.
Syntax
:root {
// css declarations or property
--main-color: blue;
--secondary-color: white;
}
CSS root – Declaring Global CSS variables
Here is the example that shows usage of :root −
<html><head><style>
:root {
--main-color: blue;
--secondary-color: white;
}
body {
background-color: var(--main-color);
}
h1 {
color: var(--secondary-color);
}
</style></head><body><h1>Welcome to CSS Root Example</h1><p>This is an example of using CSS root to define and use custom CSS variables.</p></body></html>CSS root – Styling Different Elements
Here is another example that demonstrates the usage of the :root selector for styling different elements −
<html><head><title>:root Example</title><style>
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #fcfc90;
}
body {
background-color: var(--background-color);
color: var(--secondary-color);
font-family: Arial, sans-serif;
}
h1 {
color: var(--primary-color);
}
p {
margin-bottom: 1rem;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background-color: LightYellow;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 4px;
}
</style></head><body><div class="container"><h1>:root Example</h1><p>This is an example of using the <code>:root</code> selector to define global CSS variables.</p><p>The primary color is set to <span style="color: var(--primary-color);">var(--primary-color)</span>.</p><p>The secondary color is set to <span style="color: var(--secondary-color);">var(--secondary-color)</span>.</p><p>The background color is set to <span style="background-color: var(--background-color); color: white;">var(--background-color)</span>.</p><a href="#" class="button">Demo</a></div></body></html>
Leave a Reply