CSS :root - Style All UnStyled Elements

The CSS :root pseudo-class is used when we need to select the root element of an HTML document. The root element is always the HTML element. For example, the following code:

:root {background-color: #ccc;}

is same as:

html {background-color: #ccc;}

That is, both the above CSS codes, performs the same specified task.

Select and Style All Unstyled HTML Elements - The :root

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      :root {color: blue;}
      span {color: red;}
   </style>
</head>
<body>

   <h2>The :root Selector</h2>
   <p>This para one.</p>
   <p>This is para two.</p>
   <span>@:root</span>
   
</body>
</html>

Output

The :root Selector

This para one.

This is para two.

@:root

In above example, since the element SPAN is selected and a style is applied to it, therefore :root skips this element.

Note - The :root pseudo-class applies styles to all HTML elements, that are not styled. Or in other words if I say, the :root is used to select all HTML elements, that are not selected.

CSS Online Test

« Previous Tutorial Next Tutorial »