CSS Solid

☰

Pseudo-Class - :root

Selects the root element. Root element refers the HTML element.

Example: 1. Set background color ‘lightgreen’ and text color ‘red’ to the Root (HTML) element.


<!DOCTYPE html>
<html>
<head>
    <title> CSS pseudo-class selector - :root</title>
    <style>
        :root {
            background-color:lightgreen;
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <p>Morning meeting time: 10 a.m. </p>
    </div>

    <div>
        <p>Evening meeting time: 4 p.m.</p>
    </div>
</body>
</html>

Result:

In the above example,

  • Background color and text color set to the root (HTML) element.
  • All child elements under the HTML element, inherited root element properties.
  • So same background and text colors are applied to P elements content.