This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.

Check out a free preview of the full CSS In-Depth, v2 course:
The "Root, Empty & Blank" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Select the root element of the page with :root. What is an empty element? Select them with :empty.

Get Unlimited Access Now

Transcript from the "Root, Empty & Blank" Lesson

>> Estelle Weyl: Okay, so the next,
>> Estelle Weyl: Pseudo class I wanted to talk about is :root, it matches the root element. In HTML that is the HTML, if you're going to declare a rem unit, that is the correct thing to do. You could use HTML and declare it there, but then it would only match your HTML documents.

[00:00:30] It would not match anything else.
>> Estelle Weyl: Style :root only if showing head, I've no clue what I've meant by that, but root basically doesn't show. But I'm actually showing it, because how do you think I did this slide so that you could edit everything, anyone know?
>> Estelle Weyl: Right here in these, I did head display block.

[00:01:05] Hide everything in the head except for the last CSS style block that has the class or the ID of editme. And that is the only one that is actually showing. So you're actually editing the style sheet at the top of the page. And so there's no JavaScript in all of these.

[00:01:24] There is JavaScript to make it go left to right, but I actually have a slide deck where there's absolutely no JavaScript. And if I come up with another reason to show it to you, I'll show it to you. Okay, so empty and blank.
>> Estelle Weyl: Empty has support, and it's an empty element.

[00:01:44] So all the elements that are self-closing like an image or an input,
>> Estelle Weyl: Are empty elements. They are empty elements by default. But any element that has no content in it, no spaces, is also empty. If it only has a comment and the comment goes from the beginning to the end, it is empty.

[00:02:11] If it has just a white space, it is blank. But blank is not supported in browsers yet. It is supported as :-moz-whitespace-only, so it is possible.
>> Estelle Weyl: And I'm just gonna get rid of this. Okay, I just wanted to make sure there was nothing at the bottom of the page.

[00:02:31] So empty elements that are just basically the HTML elements that are defined as empty, those are automatically matched by empty. As well as empty elements that are not normally empty, but they have no content in them other than a comment. So that's empty, and blank is not supported yet.

>> Estelle Weyl: I very rarely, if ever, use this one. I would like to actually use :-moz-whitespace-only or blank when I'm doing content management systems, CSS. And people are doing it because they it often adds just extra spaces at the bottom accidentally. And they don't know to remove all the paragraphs with not breaking space inside.