Level 4 Pseudo-Class Selectors

[00:00:00]
>> We're moving on to the sizzle part of this particular workshop, which are some of these new pseudo classes. And if you are following anyone who talks about CSS on Twitter or other locations, you will find that they're talking about these new pseudo classes called is, where, not, and has.

[00:00:15]
Not has been around for a while. Is, where, and has are brand new ones. And so I wanted to take some time to put some focus on these because they are mind blowingly helpful and interesting and different as you write your HTML and CSS. All right, so this is our Iceland website again, and Iceland was very kind.

[00:00:39]
If you go to their government website, they will tell you what exactly those hex codes for their flag colors. So that is of course what I have used here on the Web page, are those, and I've set those up at the top here as some variables. And as you'll recall here on the page, just a couple of things to point out.

[00:00:59]
We had this aside here in the middle and people were talking about that as a sidebar. Generally speaking, we think of that as vertically-oriented. Just to be different for you, I have made it horizontally-oriented right here in the middle of the page, just to show you that a sidebar doesn't have to actually be a vertical thing on the page.

[00:01:16]
You could do something like that instead, okay. So this is mostly a styled page that we have going on here, but there's some things that maybe we would want to improve. So for example, I've added a section here to this Web page that talks about the animals of Iceland, because I know you're just dying to know what animals live there.

[00:01:35]
It is a long list of animals that live there in Iceland. But we certainly have a gaping bunch of the page over here, right? But then these lists get kinda long, we have a lot of space. What are we going to do about that? That is one problem we might wanna think about solving.

[00:01:52]
We also might wanna think about how I separated out one footer from the other footer down here at the bottom. You could do that with classes, but I did that in a different way just to show you. Okay, so we have down here, we have a footer, that's sort of the generic footer styling that would apply to both kinds of footers, right?

[00:02:18]
If I were to say, start a comment right here, both of my footers would look the same way on this page like that. But because I separated these, with the article footer coming second, then I could apply a different kind of styling here for that. So that's what's going on for that.

[00:02:43]
All right, so there's nothing new in that CSS if you wanna read through it and see how I styled everything. You're gonna see a whole bunch of stuff that I've done before. But now what I wanna do is I wanna go back and refactor some of the code that I have here to make this a little bit more efficient, okay?

[00:03:01]
So we're gonna scroll back up here in our CSS, Up here to the top. So here's something that is fairly typical that you'll find inside of pretty much any kinda CSS that's out there right now. Here on line 31, I have a long list of article h1, article h2, article h3, article h4.

[00:03:25]
Because I want all of these article headings to be styled in a specific way, in this case, with a PT Serif font family. This is the way we've done it for 20 years, we've just made a huge, long list of these kinda things. And inevitably, somebody makes the mistake of this.

[00:03:43]
They'll do article h2, then, h3, h4, h5, right, and think that that actually means the same thing. It doesn't. Okay, so that particular selector that I just put there says for h2s located in an article and all h3s and all h4s, right, for everywhere in the document. So you have to be verbose like this and you have to repeat yourself over and over again.

[00:04:12]
One of the brand new selectors is targeted to making this a little bit easier to deal with, and it is for that reason that this is just amazing to have this selector. So there are two of these. One of these is called is and the other one is called where.

[00:04:36]
And the difference has to do with specificity for these. So where is less specific and is is more specific. And I'm gonna leave it vague like that for now until we get to the specificity part of this course later on, okay. So one way that you can rewrite these, the syntax is gonna be the same for either one of these, but the way you could rewrite this would be as follows, article :is, we could say h2, h3, h4, h5, h6.

[00:05:15]
Then we want, Then we're gonna wanna have the PT Serif font family displaying here. And just to show you that this worked, we could add to it a color, Fire-red. So that will select all of those headings there on the page. In other words, we don't have to write article h1, article h2, article h3 and all the commas separated, we can now do it this way.

[00:05:50]
So article is the thing that's in common, these are what come after that. Does that kind of makes sense, how that fits together? And you can change this from is to where, that will also, in this environment, it will work as well, I believe. You'll see absolutely no change whatsoever.

[00:06:10]
The specificity of the where selector is lower. And I'm gonna talk all about specificity in lots of detail most likely later on. Okay, so later on here, we have an aside h3, all right? So basically, right now, for all of my headings I want them to be PT Serif, but for my h3, I want it to be Fira Sans.

[00:06:36]
And I've got the my aside h3 with a whole bunch of other styling that goes with it, it comes later in the document, and it works fine. But I could combine this particular issue here, this font family Sans Serif, with the selector that I just wrote. But another way that I could do this is simply to say, all of those h3s except for, right, just not this type of h3.

[00:07:03]
In this case, it's an h3 inside an aside. So we could rewrite that, I'm just gonna remove that style here, you'll see it reverts to PT Serif. Let's go back to my is style up here. So here, what I'm going to do this, is h3:not, Aside h3. Sweet?

[00:07:35]
So now for all h3s, make it PT Sans, but not the aside h3. The aside h3 is not gonna get this style. So it is just gonna continue on being Fari Sans. Makes sense? So we're getting very efficient with our selectors, right, kind of refactoring. And it may be that the easiest way for you to work with these is to write your CSS first and then refactor, do these little mini refactors, just like what we're doing here to make this a little bit more efficient.

[00:08:05]
By the way, of course, you'll wanna check with browser support for whatever browsers it is that you're using. These are kind of cutting bleeding edge, the last few versions of browsers support these at the moment. Okay, and then we have my last favorite trick here which has to do with hats.

[00:08:25]
And this just blew my mind when I saw this one. All right, so we're gonna deal with this list of animals here. Now, it would be really nice to be able to take these bullets that I have here and maybe make some columns out of them. Wouldn't that be great?

[00:08:42]
And we could write flexbox to do this, or we could write columns to do that. But it would be even better if we could make this conditional. So in other words, if Iceland suddenly gains a whole bunch of animals. [LAUGH] A whole bunch of new animals move to Iceland and this list gets longer, or a bunch of animals die off and this list gets shorter, we will be able to handle that inside of some kind of conditional code that we'll format accordingly.

[00:09:13]
And so the way that we can do this is with the has selector. So has is this wild and crazy one that selects completely differently than everybody else. So as I have told you now a couple of times, we write our selectors left to right, but we read them from right to left.

[00:09:32]
We go from deep in our HTML going outwards. Has goes the other direction. It's gonna start from the parents and work down to the children. It looks for patterns on the parents and then applies, if that pattern in parentage works, or ancestry, I should be more specific, if that pattern of ancestry works, then it will apply styles to the specific children.

[00:09:58]
And so the crazy thing that we can do with this has to do with that list layout. So I'm just gonna add this down here to the bottom after everything else. What we can do is this. So it's an unordered list, right, ul:has. And what I'm gonna say is, for my li:nth-child(6).

[00:10:25]
In other words, we're testing to see if we have at least six children in this list. Because we just tested to see if the sixth one is there. If there are 6, let's make columns 2. Whoa, [SOUND] sizzle, sizzle, right? So now it's smart enough to know that I have at least six things in that list.

[00:10:51]
Why six? I don't know. I just decided that was a good spot. And it's smart enough here, by the way, to make those relatively even. I think there are 15 of these. So one column has eight and the other column has seven, right? So we can apply even further styling.

[00:11:08]
We just put it a little further down the page. So ul:has(li:nth-child), let's say the 11 of them. So if there's 11 of them, that may still look a little bit long. Then we can say, columns: 3, waah. So it's smart enough to know that in my 15-item list, I do have an 11th child.

[00:11:34]
So now we're going to set it up with three columns instead. And it doesn't apply to the seabirds where there were only three of those. So it doesn't fit either of those tests. It doesn't fit that there are 6 items, doesn't fit that there are 11 items, yes.

[00:11:49]
Yes, Mark says has, is, and where are difficult to search for on search engines. You're absolutely correct on that. That is because they are brand spanking new. I would just suggest that you go do a search for MDN CSS has, MDN CSS where, those will pull up the pages with information about where, is, and has.

[00:12:17]
Yeah, and they were very happy in the chat. So there's that. Okay, so this is a really cool use of has. We can apply conditional formatting. It's not a media query, it's not anything like that, we're just testing to see how many things are in a list. And if there are enough of them, we'll just put some columns in place.