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>
      :root {color: blue;}
      span {color: red;}

   <h2>The :root Selector</h2>
   <p>This para one.</p>
   <p>This is para two.</p>

The :root Selector

This para one.

This is para two.


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 »

Follow/Like Us on Facebook

Subscribe Us on YouTube