CSS root selector
CSS is all about presentation. Discover how CSS root selector works to transform plain HTML into a premium user experience in the guide below.
This pseudo-class within CSS is designed to target the root element of the document. It specifically singles out the top-level ancestor within the document tree or DOM.
In HTML, the <html> tag constantly serves as the primary element. Despite the fact that the :root selector is similar to the html selector as they both target the identical element, the :root selector possesses greater specificity.
Syntax
:root {
// CSS property
}
Example
<!DOCTYPE html>
<html>
<head>
<title>:root selector</title>
<style>
:root {
background: lightblue;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to the C# Tutorial</h1>
<h2>This is an example of :root selector</h2>
</body>
</html>
Now, let's experiment with the HTML selector and the :root selector at the same time. While their functionality is comparable, when it comes to specificity, the :root selector emerges as the superior choice.
Example
In this instance, we will be setting identical properties in both the html selector and the :root selector. The properties specified in the :root selector will take precedence due to its higher specificity. However, if there are properties defined in the html selector but not in the :root selector, then the properties from the html selector will be applied.
Example
<!DOCTYPE html>
<html>
<head>
<title>:root selector</title>
<style>
:root {
background-color: lightblue;
color: blue;
text-align: center;
}
html{
background-color: red;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to the C# Tutorial</h1>
<h2>This is an example of :root selector and html selector</h2>
</body>
</html>
In the previous example, we observed that the background-color and color attributes are specified in both HTML and the :root selector. However, the properties defined in the :root selector take precedence due to its higher specificity.
