 CSS is growing up really fast these days and one great example of that is the is, where, and has pseudo classes that help us select things. And despite it has only landing in browsers in 2022, it's already past 83% with their support only growing in a new year around the corner. Maybe you want to give them a whirl, but you're not sure how to start or really how they work. So that's exactly what we're going to be looking at in this video. So let's dive in. Hi there, my front end friends. Thank you so much for coming to join me for yet another video. And if you're new here, my name is Kevin and here at my channel, I help you fall madly deeply in love with CSS. And let's get right into it by jumping into the is pseudo class right here. And there it is. It looks like that it's nothing too fancy. And we're going to play around a little bit with this code right here to see how it works. And with the HTML that we see. And we have this example one here, which is going to be our focus. And we have these other thing we have an H three and an H four and a link and some other stuff in there. And so one thing that we might do when we have the is pseudo class is we can come in and or traditionally speaking, what we used to do is say we had my example one, and you want to select many things inside there, like we wanted to select the H three, and then I had my example one, and my H four, and let's also do my link example one, and I wanted to select my link and give them all the same color. We want to make those all read. There we go. It works. Now, this is completely fine. We're setting up multiple selectors and then just grouping them all together in one rule. But it's kind of like sometimes a little bit verbose to write everything out. You have to repeat example one a bunch of times. So what is allows us to do is the exact same thing, example one, but then here I knew is, and it's a descendant selector just like I have here where I'm just putting a space, we could also do it in other ways. But let's just do we have a space there. So I have a space here, it works exactly the same. And then in here I can do my comma separated list H three, H four, and a, and let's give those all a color of we'll try blue this time, and we should see them change. So right away, this is kind of cool. I like how it works. It makes things a little bit easier to write and to update because if I need to make another rule, I don't have to duplicate my line again, and then do another one. One example where I actually use this a lot is for my links for when I do hover and focus, because I can do a is hover comma focus, and then come in with my style for it. So then I can say my color is purple. We're coming in with the world's best color scheme here. And I give myself a hover state right there. So for me, I really like that just instead of having to duplicate things, especially if you're doing maybe it's a button or maybe it's something that's nested somewhere else, and you have a bit of nesting going on this can help clean things up a little bit. But it also has other advantages. And let's comment this out to begin with and see what one of the advantages here is where let's come in here and do an example one. And I'm going to put we make a typo along the way or we're doing something or we don't realize that we can't start a class with a number. So we do a one, let's say, and maybe over here, let's even do that. We're going to give this link the class class is equal to one a I should say not a one is that way around. And everything breaks when I save that, even though this I have that class there, why is none of this working? And that's because classes can't start with a number and neither can IDs. So if I try doing that, this is an invalid selector. And because this is an invalid selector, this entire rule is considered invalid. And it's, it doesn't do anything and CSS just skips it over like if you made a typo with something else. And that's super frustrating. This is like one of those really hard things to debug if ever you run into it. So yeah, if I do that hit save, you can see it's fixed it. Now let's keep this here actually will do the invalid one. So we can see it's not working. Let's come and turn these two back on. And then over here in this list, I'm going to put my dot one a hit save. And the blue is still working, because the list of selectors inside of is our forgiving, meaning if one of the selectors in here is invalid, it doesn't matter, it's not going to pay any attention to that. But all the other selectors in here are actually going to be working. Now I'm going to rid of this invalid selector here just for now. And let's turn this into a valid selector, we'll just call it dot link or something like that. So it's a working selector. And one thing that's interesting with this and the way that is works, that's different from here. So let's add my dot example. And we'll put my dot link here as well. And we're gonna have my color red, my color blue. And let's come over here, I'm going to add this to actually be link. And interestingly, you'll notice that in all of these cases, they're blue. But let's take this over here, we're going to move this one down below. So we have this one first, this one second. And here we have like example one h three, so you'd expect the h three to actually be read. But things are staying blue, I'm saving right now, until I come and I do an important important, and now we can overwrite them all and make them read. But if this color isn't important, even though it's coming after this, the blue one is winning. And that's because this blue one here actually has higher specificity than what we have here. With this being with this one being an exception, I was like, why is it not read down there, the link should be read. So these three are not switching colors. But this one is because this one has equal specificity to what we have up here. And this is a really important thing to understand with is if we switch them back around, they all go to blue, we'll put them back this way, this one goes to red, because it's only this one that's winning. And when you do a comma separated list like this, very important with is, or when we're not using is, each one of these selectors has its own specificity. So this has a class plus an element, class plus an element, class plus an element. And this one is a class and a class. If we look at the is selector over here, this is my class selector. And then it evaluates this entire list. And it takes the selector with the highest specificity from all of those. And it applies that specificity to all of these. So even though this is an example one each three, it's getting the same specificity as my example one link right here. So this has higher specificity than my H three, my H four, and my A that are right there. This is very important to remember because that is something that could potentially get in your way down the road. Or if you had like an ID selector in here at one point, then this you know, even though this is an element selector, it could be very hard to overwrite. So you just want to be careful with that. It's a very important thing to take into consideration when you're using it. And we'll look at a more practical example of how we can use is but not with is we're actually going to look at it with where because we're talking with specificity. And the interesting thing with the where is it's doesn't have any specificity whatsoever. It's a bit of a specificity killer. And it works exactly the same way as is. So let's say we came here and we did the same thing. But if we come and look, we have instead of example one, we have the same setup, but we're going to be looking at example two here. And so if I come here and I do example to we'll just move that up a little bit. And inside there we use our where selector and our where pseudo class I should say. And let's say where we'll do the same thing h3 h4a for now. And I do the color is red on those, you can see all of them change over. And for this actually, I'm going to take the example two off just for a second. So we have where h3 h4a and you'll see my a is not even working now, this because I have other styling on links. But let's look at this h3 right there. I'm going to come above that h3. And I'm going to put an h3 here and say the color is blue. And this h3 is changing over to blue. Because even though this is coming after it's inside a where where has no specificity in it. So it works exactly the same way. And interestingly here, if I look at my link, I have an ID on that link. So we could even come in here and switch this link color out here for my ID of link. And it's still not going to work because somewhere up in my style sheet, I have just a regular a selector that styling this. Or even this h3 is not becoming red, you can see the h3 is still blue, even though we have the link in here, whatever you want anything that's inside the where it gets zero specificity. So if you're doing a reset where you have things that you want to make sure are super easy to reset, you can have your where and then body, and then put some classes that are styling on that. And you know that everything on this has zero specificity on it, which can be useful. Is it the best use case for where that is a little bit questionable. For me, I know I like using it in times where I need to put in descendant selectors, like maybe something like this where it's my example, too. And I'm coming in with something that has like multiple different selectors, or maybe probably not an ID, but maybe, you know, several levels deep. And I just want to make sure it doesn't have any specificity on it. This is definitely something where I'll purposely use where to make sure like, okay, I'm setting this up, but I want to make sure it's easy to overwrite later on. And I don't want these extra classes or descendant selectors and all these other things that I'm using in here to be adding to the specificity. So in those situations where you want to prevent the gains in specificity, it doesn't have to be in a whole group, it could just be something like that, where you have example two where link, that's all, and nothing else. So now obviously, these are going to read because this example two is still counting to there. So even as an example, now this I've never done actually before, but we could do a where on here. So we're saying where example two, we're not giving any specificity to that. And then we're doing the descendants, which also have no specificity. Or if you didn't mind those having it, you could do something like this. But now the specificity of these is kicking in even though this part of it doesn't anyway, kind of weird. And so maybe this is not the most practical example, but I just want to give you an idea of how it works. And another thing that could be really useful here, and I don't have anything set up for it, but just really fast, if you had something like a card that you want to change things when you hover, what's cool is you can do your hover, and then you can do is and select the list of children that are inside of it. And the nice thing with that is you're not doing like your card, hover, a or say, card title, and then comma, and then your card, hover, card, button or whatever, you know, you're not listing and having to repeat this part over and over again, which can be kind of annoying, you just come in with your is, or if you want it to be easy to overwrite, you come in with your where pseudo class, and then you have your car or button here or whatever it is that you need, right, and you can just list things out that way. And of course, you can format this if you find it's a little bit cumbersome, you can, you know, break things over multiple lines, if you feel like it's going to be a little bit cleaner, set things up, however you need to to make it as readable as possible. And with that, it's going to bring us down to the has selector, which is the newest of all of them and the most powerful one of all. So for this example, I have two columns set up here. And when I want to look at let's go look, these are both in classes called example three. So we have two divs in this case called example three. So we're going to start with that and people called the has the parent selector that was sort of the idea of it, but it opens up more doors than than that really. It's Jay has from on the Google DevRel team is called it the family selector. And just because you can do more than just selecting a parent. So but let's look at how we can treat it like a parent selector, or not example, example three has image. And so if I have an example three that has an image in it, just traditionally you might do example three with a descendant selector, right, and then say with 50% or something. And we can select my image that's inside example three. This is selecting if my example three has an image, we're selecting the example three. And so here I could say that it has a background of we'll just change to blue for now. So we see a change and it's really obvious what's happened. So, you know, it's only selecting this one, this one doesn't have an image. So maybe you want to change that one example three has a and then the background on that one can be green. All right. And then only that one is changing. And the other one isn't because this one doesn't have a link in it. And doing something like this, not the nicest example, or most practical example, but it shows us how it's working. But what we can also do now is to make it something a little bit more powerful than a parent selector is we can combine that with a descendant selector. So I could say then the h3 that's inside there has the background of blue or let's make that red to make a really nice Christmassy color scheme going on. So we get that coming in and maybe the color of black. And let's make this fire brick. So it's a little fire brick. It's a little less hard on the eyes. So we're selecting the h3 that's different because there's an image inside the parent there. And there's ways you could use descendant selectors maybe in a simple example like this, even though we can't really because this h3 is coming before the image. So you can always select things that come after but not before. But now you can actually do that, which is really cool. So another example here is let's just select my paragraphs and we can change those backgrounds to green. You can actually use it to select every element except the one that you're selecting and a whole bunch more has has some really amazing possibilities that it's opened up. This has just been a general overview of our three are is our where and our has if you'd like to deep dive has and see some more practical examples of where you might want to use it. I have a video that is right here for your viewing pleasure. And with that, I would like to thank my neighbors of awesome over on Patreon, Jan, Johnny, Michael, Mr Dave, Patrick, Simon and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.