How you can simplify your CSS with :is()

in this video we are exploring the is pseudo class and what is the pseudo class what does it do why does it matter how is it going to simplify your life because it definitely well it lets us write much drier css so we're going to be exploring all of that in this video stick around so this is in codepen right here if you do want to follow along you can just delete everything before general styling when you open the link in the description and you can follow along because this is all this is just general styling here we're going to start right here and we're going to be looking at the is pseudo class what is it what is it for and i'm sure in one point or another you've had selectors where you want to select say you have a header and you want to get both the h1 and the link in here to be a different color compared to maybe things you have in other places so you come in and you do something like header h1 comma header header you got to do things right like that header h1 header a and then we can say a color of let's go with lime green for something interesting and look at that they're lime green don't use that color on that background it is terrible accessibility but it is working and you've selected both of them so we have a compound selector here and with this compound selector we have a comma separating so we can do multiple selectors now if you can get really complex with these now we do want to be careful with compound selectors like this where we're spacing them out we're getting the children i do think it's fine doing this but you just want to be a little bit careful and not go overboard it pushes up specificity there can be other issues but sometimes it's very useful and you can get much drier css by chaining your selectors together like this and having comma separated ones but you can also run into issues a on some really big things it can get really bulky but if you put an invalid selector here and i don't know how this would happen but say you're going fast or something and you do that and that means nothing or whatever it is something happens and for some reason you have this big chain of selectors you have all of these different things and one of them is invalid it doesn't work in your code anymore this entire css rule here it is gone in the garbage the browser ignores the entire thing this is very different than when you have a typo here so if i said uh like color is one t 0 p and the browser doesn't know what that is this is very different right because then this one line of code will get ignored but if you have something like this it's throwing the entire rule out let's even you know for fun font family we'll go with a serif just so we can see a difference we'll say that the colors there we'll see a font size of 10 ram just so we can really see nothing is working but then when i fix that one little thing the entire thing will kick in and it works everywhere and it looks terrible um but just to show you how that is working and why you do have to be a little bit careful i don't think that's something you'll run into often but it can be really annoying when it does happen where is comes in is instead of writing things like this what you could do is you could say header and then here we could say is and inside of this we can put all the different things that we want so i could say h1 comma a and here we can see that this is working for my serif and then let's come in here with the color we won't use lime green let's use uh turquoise now turquoise you gotta spell spell things right turquo baseball turquoise turquoise ha i got it that's even worse than before okay let's go with a dark color there we go so we can see that it's working so here uh what we're doing is a header is and then h1 and comma a so the nice thing with this is you don't need to have such a big rule you can sort of space things out a little bit like this you're only putting the parent selector once when you have this um when using a compound selector like this one you only have to list this at once so like say you had other things in here you had a header say we had a button that could have end up in there and then here you'd have a header let's just say if ever there's a small tag for some reason anything like that you know this gets longer and longer and longer and when you want to make a change in here it can be a little bit annoying so here it's a little bit easier where you can do h1 then dot btn comma small and you can list them all out here so you only have to do it on one selector instead of having a whole bunch of selectors and the other thing that's nice with this you can see my text is all purple is if i muck one of these up so this button somehow it ends up being invalid and i'm using something that doesn't work or i shouldn't do on the button actually we should leave that as a class i'll do it on the a again is you'll see that the links actually uh purple's a bad color though let's go back with green because one of them was purple by default but you can see now this is green um but the green isn't working on my links down here and the reason that's happening is because this is my invalid selector so only the invalid selector is being thrown out it's not ditching the entire rule so it's much more forgiving on things like that so that is a nice benefit of the is selector like this and another way we could use the is selector in a bit more of a cool way is you don't have to use it the way i was doing it so just to reiterate a little bit here we have my card then we could say is h2 comma a so we could select my h2 and my a that are in there and say color is red and now over here you can see that and my links inside of here have all changed to red but another really cool thing you can actually do here instead of doing it that way is the other way around so what you could do is you could actually say something like we could start with our is selector so we could say is uh we could even say header space card dot card and just for fun i don't know why you would want to do this but then we could say uh h or then we in here we could say p hover and i don't know why you do it on a paragraph maybe a link would make more sense but p hover here is color of red quick example just so we can see it actually working and you can see all of these paragraphs now are working this i think is the more useful used uh use of this you know this while this is can be a little bit bulky here this is the equivalent of writing header p hover comma uh dot card p hover and then comma and you keep going like that you have to keep doing your p hover here so it's kind of cool that you can just have that one p hover out here so you list all the things you want put the one compound here and it just works just like that now there is one really important thing that you're going to have to take into account if you're doing this um and i don't think you'll run into it too often but there is a specific specificity specificity i got it a specificity thing that comes up when you are doing this and so on this if i say card and then we do our is selector our pseudo pseudo class here and we say is title comma key and we say color is red now what's really interesting here is you can see they've all changed to red and later on maybe you forgot you did that and then here you have a card p and this has a color of yellow well it actually will be staying there we go it is staying red and that's because this actually has higher specificity than this even though you would think this is my card with my p on here the is itself does not contribute to the specificity but what does is this title here so it's whatever you have here the height the thing with the highest specificity within this group is what is getting the we're just setting the specificity of all of this um so you do want to be a little bit careful with that um and just to show you that this would work uh without the is there if i just put is p here like that now the yellow is actually going to kick in because this specificity is the same or equal to this one and this one is coming second because if i move that up to the top here now they will switch to red because this is coming second so you do have to be a little bit careful with that and just know that it's the thing with the highest specificity within this that is working another thing another little thing along the way that could be important to know as well is you can do some interesting stuff so i could actually say p space a here and you can see that the paragraph uh the links inside the paragraph are changing to red so you can do complex selectors within the is here i'm not sure what the browser support is for that i know complex selectors within these pseudo classes like not and other things the support is gaining but it's not everywhere so you might want to be a little bit careful with that or just double check and do some cross browser compatibility but for overall browser support it's actually really good and as long as you don't worry too much about internet explorer these days which i hope you're not having to i know some people have to because of their work but overall i think internet explorer is something we don't have to worry about anymore and if that is the case then the is selector or the pseudo class i should say is good to go and you can definitely be using it on your projects and that is it that is the is pseudo class i really hope that you like this if you'd like to know more advanced selectors and combinators and all of that type of thing i do have a video that dives into it it should be showing up on the screen right now or it is also linked down in the description below as well thank you very much for watching i really hope you enjoyed this and i hope you can find some good use cases for it we just sort of scratched the surface here but it is something that i'll definitely be looking at using more and more in my projects going forward a huge thank you to my patrons for their support each and every month including zach who is my enabler of awesome and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 333,844

Keywords: Kevin Powell, tutorial, html, css, css is, css :is, css :is(), the is selector, the is pseudo-class, pseudo-class, advanced css selector, css selector, css selectors

Id: McC4QkCvbaY

Length: 9min 20sec (560 seconds)

Published: Tue Mar 02 2021