From the course: CSS: Selectors

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

:root and :empty

:root and :empty - CSS Tutorial

From the course: CSS: Selectors

Start my 1-month free trial

:root and :empty

- [Instructor] Next up are a few pseudo-classes that are a little odd, that aren't used very often, but they may still be of interest to you. First of all, let's talk about the root pseudo-class. So root is used for setting up the root of the document, and that's pretty much it. In the HTML and CSS world, the document root is the HTML tag itself, and quite frankly we usually just use the body tag. However, pseudo-classes do have a higher level of specificity than the HTML element does in your CSS, and so anything put in root would win over anything put in the body tag or the HTML tag. And second of all, the root pseudo-class is going to allow you to access the shadow DOM, if that winds up being something you want to do with Javascript. So, sometimes that can get you to a different place. The root element is actually becoming really commonly popular with CSS variables, also called CSS custom properties. And I'll show you how you set up something like this. So, here in my CSS I have a…

Contents