Before proceeding to CSS root selector, I’ll advice you to read CSS tutorial for beginners, CSS Properties and Values and CSS Selectors first. If you have already read, then we’re good to proceed.

Introduction

As the name suggests, CSS :root selector selects the document root. HTML element is always the root element in the HTML Document.

CSS root selector Example : 

:root{
   background:yellow;
}

we can see the result :

See the Pen css :root selector by The SuperKat (@thesuperkat) on CodePen.

So as we see in the example above CSS root selector targets the document’s root element in the webpage and sets its background to yellow. It is supported by all modern browsers.

It doesnt matter how many elements or how complex is the structure of your webpage. Css Root will always target the HTML element of your webpage. We should see it below:

    
      
hi there
      
hi there
      

        hi there
        

          hi there
        
      
    

and

:root{background:red;}

and our beloved output :

See the Pen :root selector by The SuperKat (@thesuperkat) on CodePen.

At this point some of you might be thinking what if you don’t write the  tag in your webpage?

Well you might start your webpage with a   only. But that would be invalid though it will still run. Because when you run your webpage, the browser is automatically going to create an tag for you. So you can always find Mr.  in your webpage when you run it, weather you put it or not. Hence css root selector can always be used.

Well, moving forward, we have to say farewell to css root selector for now. Next step is CSS Hover. That will cover state based styling of your webpage. Don’t worry if it sounds so funny to you right now. It’ll all make sense when you read the next lesson.

Next Step : CSS :hover

Related Links :

• CSS element selector
• CSS [attribute] selector

The post CSS root appeared first on The Superkat.