CSS root
The <html> element is always the root element. The :root is similar to the HTML selector because both of them target the same element, but the :root selector has a higher specificity.
Syntax:
:root {
// CSS property
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>:root selector</title>
<style>
:root {
background: pink;
color: black;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to the I2tutorials</h1>
<h2>Example of :root selector</h2>
</body>
</html>
OUTPUT:
Example:
Similar properties in HTML selector as well as in :root selector.
<!DOCTYPE html>
<html>
<head>
<title>:root selector</title>
<style>
:root {
background-color: pink;
color: black;
text-align: center;
}
html{
background-color: red;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to the I2tutorials</h1>
<h2>Example of :root selector and html selector</h2>
</body>
</html>
OUTPUT:
