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
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Understanding only selectors, :only-child, :only-of-type2m 22s
-
(Locked)
Understanding first and last selectors, :first-child, :first-of-type, :last-child, :last-of-type3m 7s
-
(Locked)
Understanding nth selectors – :nth-child, :nth-of-type, :nth-last-child, :nth-last-of-type4m 9s
-
(Locked)
:root and :empty4m 27s
-
(Locked)
-
-
-
-
-