 Hello there my friend and friends and thank you so much for coming to join me for yet another video you'll often hear people say things like use a single class selector for everything and this can definitely be a very handy rule of thumb especially if you're early on in your CSS journey but here at my channel I like to help people fall in love with CSS and one of the ways to do that is to take off our training wheels and so today we're going to be looking at some tricks that we can do to help when it comes to writing less code because when you just use a single class for everything sometimes you end up with a lot more code than you actually need and we'll also look at some cool little user interaction tricks that we can do with some more advanced CSS selectors and we're going to do that by diving into this example that I have here where we're going to explore a whole bunch of different things and the first thing we're going to be looking at is you can see I have a navigation set up at the top but I have bullet points because it's set up with a list and then I have a regular list here and then I have this image gallery set up with a list over here and a lot of the times in our CSS we'll get something like this to remove the bullet points because so many lists that we create don't need them the problem is when we do that while it helps with things like my navigation and my image gallery down here at the bottom it doesn't actually help with this and I don't want to have to bring those styles back in so how can I do that well we can actually be a little bit more specific with the selector but in an interesting way because if we look here this has a class on it this one doesn't and then the one that's further down over here also has a class on it so I can actually select anything that has a class by putting an attribute selector here with my square brackets and just write class and hit save and now the ones that have classes get the styling on it but if I have a ul without a class well now we get no styling on there and we can do this in reverse too so you might want to come in and you might want to say ul and say not class and then you can select any ul that doesn't have a class because maybe you want to change your font size for some reason we could say one ram or something and make your font size bigger or smaller whatever you need to do but you can use any element that either has a class or doesn't have a class this way which can really come in handy and actually we look at my navigation right here you can see the sign-up link that's just right there and there's a problem with it where it's hard to read the text because my normal button should look like this but my class is overwriting it and it's because I styled it this way where I have a descendant selector on there so this is higher specificity than my normal button styling and it's it's ruining my button that's up there so there are other options here one of them would be to do what we just did here where we could do that exact thing and say not and in the not say class and hit save so then we're only styling regular links but if you have a link that does have a class in there or something then it just gets its regular styling which can definitely come in handy and I've definitely used this one before so in certain situations whether it's just to be more generic things or to be a little bit more specific in how you want to style things being able to choose something for a class can definitely be pretty useful and okay so next up we're gonna jump down to this showcase that's right here let me move my head down to the bottom so I don't cover any of these images and here I just have a list set up with my showcase list and then list items for each one and then an image inside of each one of those really quickly I don't have any alt text on here I left it blank because I just set up a quick demo this is definitely a do as I say and not as I do because you should definitely be putting alt text on images if they're like this this is not really decorative you should have some sort of context of what those images actually are but if we come in here this is how I've set up my grid where I'm using my repeat syntax here to set up six columns and what I want to do is highlight the ones in the middle to sort of balance out my grid a little bit here and we can do that in an interesting way so if I come in and we do that showcase list and I'm going to select my li and I'm going to do nth child or it could also be an nth of type it depends how you want to do it but nth child will work fine for what I'm going to do here and let's select this one here so I have six that's my seventh one so I could just put seven here and hit and then I'm going to say grid column is two and this is not the trick that we're looking at let's do a span two not just a two and it gets bigger because now we're spanning across two of the columns on my grid ideally I also want to do that for this image and this image so we get those ones all bigger and then it will fill up everything and it's going to balance out so I could take this and then also do it for the eighth and also do it for the ninth but there's another way and we can use this to select ranges of content as well and so the first thing we want to do is actually say it's going to be an n plus seven and what that means is it's going to select the seventh and everyone after that so we're going there we're selecting all of this but now I just want to exclude these ones at the bottom I only want it to be these three that are right here so to do that attach there's no spaces or anything like that I'm going to do an nth child again and say it's negative n plus nine and the negative n means we're counting backwards so we're going to go from the ninth one and count backwards so now if I hit save it's selected the seventh the eighth and the ninth and of course I could change that you know any range you want here I could do this starting at three and then it will go from the third all the way to the ninth so starting at and ending at right there a simple comment here it should be pretty easy to tell what's actually happening let's move this back to being seven eight and nine and yeah it works really well and the reason this is working is because it's only finding things that match both of these so it has to be both an nth child seven up and an nth child of nine going backwards and so it selects the range of content this is a really useful in my opinion you might not use it regularly but you're super happy to know it exists when you do actually need it and now moving on to the next step we're going to stick with our showcase grid here and I'm going to look at two different ways we'd accomplish the same thing which is selecting every element other than the one that we're interacting with so to be able to do that and when I say interacting I'm going to do it as a hover but this could work with a focus as well my images can't be focused and I wouldn't really want them to be but if you did this in a different way where you might have links or other things that are involved you could definitely do with this with focus states too and we're going to say that we have my showcase list once again and then on that showcase list we're going to say a hover and then we're going to select every image that's inside the showcase list and it's only going to impact it when we're hovering on the showcase list and we're just going to do something simple we're going to lower the opacity down to like 8.5 so if I hover anywhere you can see the whole list darkens because all the images are getting the opacity of 0.5 this is really important we don't do it like this because this would look exactly the same right now but we wouldn't be able to overwrite things that are inside of it because if you take a parent and you reduce the opacity you can't go into one of the children and raise the opacity of that child whereas if we lower the opacity of all the images what we can then do we're going to duplicate the selector right here and we're going to say that we're going to move this off of here showcase list image hover and the opacity will be one and so now whichever one I'm hovering on is actually going to get that opacity which is kind of cool and this is working because of the cascade because these are equal specificity right we have a class selector we have the pseudo selector here uh and then we have the element selector and we get those same ones here just in a different order so same specificity this one wins because it comes second and that works and you could put a transition or something on here to make it look a little bit nicer of course and there is another way to do this the other way to do this is a little bit different though where what we can do is I'm going to comment this out and we're going to come in and this can be really useful but browser support isn't quite as good but I'm going to say showcase list has image hover and let's start with that actually we're going to say yeah has image hover and here we're going to say image and we can do the same opacity of 0.5 so now if I'm hovering on top of an image you'll notice that they get the opacity of zero there is a difference here though because if I go in between the two of them we're not getting it because I'm in a gap now so this is the difference with the opacity with these small gaps it definitely can lead to some flickering do apologize for that bother do a little bit but I'll try not to do that too much but it's definitely like a potential downside but it could also be potentially what you want because you might want this only to come into effect when you're specifically on whatever element you're building this interaction around and the cool thing with this is if we come here we can do it now with a single selector by saying not hover and this looks kind of weird for sure we're doing basically the same thing we were doing here but we're doing it with a single selector because we're saying if my showcase list has an image that's being hovered on every image that's not currently being hovered on will get the opacity of 0.5 so the has selector here is super cool super powerful and is actually getting to an sort of acceptable level of browser support so I'll put a link to the description so you can make your own mind up about it if it has good enough support or not but being able to select all the siblings other than the current one you're interacting with can be quite useful and you can do some interesting things with that so yeah it looks a little bit strange but once you understand what it's doing super cool selector right there and this next one just because I want to stick with the example here we're going to stick with our showcase so I'm going to comment this out the finished code for all of this will be in the description down below though so there'll be a link to a code pen where you can play around with any of these if you want them but what we're going to do now is one where it's about selecting proceeding and following siblings so let's say once again we have my showcase list and in this case I'm going to do it on an li and not the image just because if we come and look here we have the li's and then the images inside of them so for this to work we have to work with direct siblings and we don't want to bounce back and forth there's probably ways we could use has but it just would complicate something for nothing where we're going to be using has anyway so I'm going to say li hover and we need to say plus li and what we're going to do here is say that the we'll give it an outline so it doesn't shift the layout at all five pixels solid lime and now if I hover on one of these you can see it's not the one I'm currently hovering on but the one after it is getting that green outline on there and I wouldn't actually do this this would just you know be very frustrating as a user but I just want to show that we can select an item that's coming after something and I'll show you a way that we could probably use this in a good way and but it are not a good way but maybe a useful way but let's come here on the li hover where what we're going to do is li and then we can say has and I'm going to wrap all of this together and we can just say plus hover so if we hover on an li if the element after it is currently hovering let's just change this over to pink or something just we see that it's a different color so now the proceeding sibling or the sibling before it is getting the pink and let's change that pink to a hot pink so it actually stands out on this dark background and there we go you can see we're selecting the element just before and the element just after and we can do this to another degree too because I'm using the direct sibling selector here but I could change this to be a tilde like that and that means it's going to select all the previous and all the ones before it so you can see as I move that around it's doing you know you get the idea of what it's doing right so all the ones before our pink and all the ones after our green so we could do some interesting things with that as well and if you have any ideas on how you might use something like this please leave a comment down below and let me know but what I'm going to do is I'm actually going to go back to this version of it and we could also add in one more selector here where we could do something showcase showcase list list li hover and maybe this gets the outline as well so we say outline of lime then this one gets like green on it and then this selector I'm going to cut that we're going to do a comma here just so both of them get the same styling on it and so you could do something where it's sort of like and this is with an outline I would do it probably a different type of effect but where it's fading out a little bit around the one that's currently being highlighted so it could even be some sort of like glow effect or something else though do be careful about animating box shadows because they can be kind of bad for performance but just a few ideas or different things that you might want to play around with if you have any cool ideas for this again I would love to know what they might be and now we're going to go on to the last one which is an interesting one and it might get people that like it and might get people that hate it but I think this is a good use case for it actually where let's look here I have this article and I have a card so there's a really faint border around here the border doesn't matter too much but I have a button in there and the button has specific styling on it which looks fine on this dark background but I might come on here and I might do an inverse class where I'm actually switching it and now my button doesn't look so good right it would be good on an inverse class for the button have more saturation on it and be darker and how what's the best way to do something like that so what we can do for that is I'm going to put my button styling here this is what's currently styling my button and you can see like I sort of like this styling a little bit better so what we could do is on this inverse and you know what we're going to do let's copy this article we're going to have two of them just so we can compare the two at the same time so we have the dark one on the top and then the earned inverse one on the bottom and what we could do is and this is only with nesting so again browser support's not perfect for this but we can do an inverse like that and then do an ampersand after and the ampersand is a placeholder for the selector we have right there so this is a placeholder for my dot button so what this is actually doing is making we're nesting our button inside the inverse so then what I could do is I could come and take my colors and change them and I'm gonna you know some people might not like this idea but I'll try and justify it for anyone who's not happy with it you can see that's coming through now and then of course I can come in and we can add our and hover since we're already using and focus visible one second talking and writing isn't always easy for me but then we can come in and add our stylings there and since we're using nesting I might as well just continue to nest this all the way down and just for fun let's just change this one to an accent 500 or something just we have a different color that comes on it the reason I don't mind doing this is because especially we work in a very component ties world these days and if I had a button component I would probably expect all of my classes for my button to be in one place and this is just a really easy way to change the styling for the different contexts that my button might live in now there's other ways of doing this 100% you might actually set up your color here with a custom property and then your inverse class is changing things I'm not saying this is the only way to do it but I'm just saying in the right situation you could probably make a case for doing something like this you might get mad at me because you're saying Kevin this is super weird looking and anybody else who looked at my code base would have no idea what's going on and that's a very bad thing and to a certain extent I do agree with you but I also think it's really important not to get stuck in the old ways we've been doing things when there's new better ways of doing things just because we're familiar with them and you know it's the same with arrow functions in javascript those look really weird for a long time until we all got used to them this is actually something I went kind of in-depth in and looked at a bunch of different patterns that we have new modern ways of doing that are much better than the old ways but the old ways are familiar patterns that people are used to and I just made the argument that we should probably be looking at moving on to the newer ways so if you'd like to see that video it is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Tim, Simon, Andrew and Philip as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome