2.6 Selecting :blank Elements

Hello and welcome back to the CSS of the future. In this lesson, we are going to discuss the possibility of targeting elements with no content, beginning with a discussion of the existing CSS3 empty pseudo class. So let's jump into blank start.html, which you can find in the selectors folder of your project files folder. And here, we have a simple HTML page with h1 tag. And then, we have a couple of divs that I want to focus on here. And then, this paragraph at the bottom, it's useless. I just put it there for some filler content. But you'll notice that we have two different divs. The first div has no content in it at all and the second div simply has a space inside of it. Well in CSS3, we can currently use the empty pseudo class to target any element that doesn't have any content in it whatsoever. So let's point to any div that's currently empty by typing div.empty. And, again, this is a currently existing pseudo class. We'll take a look at the level four pseudo class in just a moment. But this particular one, let's say that we wanted to target any empty div and set the width and height to 100 pixels. And then maybe give it a background color of #eee and then a border, one pixel solid. And let's do a little bit of a darker grey color there. So let's save that as blank.html. That'll be the document we end with at the end of this video. And let's jump into Chrome and Refresh. And actually, we need to point to blank.html. Then, we have our results. So, you'll notice that only the first item, the first empty div, was selected here. The second one is still invisible. And if we go back to our code, we can see why. Again, the first one has no content in it whatsoever, but the second one has a space. Well, the CSS level 4 specification has a proposal for another pseudo class called :blank, which will target any empty item or any div or any element that only contains white space. That doesn't contain any letters or anything like that, but only contains white space. So as soon as we throw any other content in here, it won't target that, but if all we have is a bunch of white space, it will still target that particular div. And it would look exactly the same as this div:empty. The only difference, let's copy that and paste, the only difference is it would say div:blank. So the empty psuedo class which currently exists will target any div, for example, that has no content in it whatsoever. And the div:blank will target any div that has only white space in it. It doesn't have any content in it other than that white space, but you can have any amount of white space in there and as long as there's no other content, that div would be targeted. Now again, if we save that and refresh, we can see that it's not currently supported and as of the time of this recording, it's not supported in any major browser. But that's the idea behind it, is once you use the :blank pseudo class, you'll be able to target empty divs that only have white space in it as opposed to divs that don't have anything in it at all. So thank you for watching, and I'll see you in the next lesson.