 You're relatively new to CSS, but you've learned how the selectors work with your element selector, your class selector, and your ID selector, but you're looking to learn new things and step your game up a little bit? Well, if that's the case, you're in the right place, because that's exactly what we're covering in this video. Hello, my friend and friends, thank you so much for coming to join me once again, and if you're new here, my name is Kevin, and here at my channel, I hope you'll fall madly deeply in love with CSS, and learning that there's more than just those three selectors, or actually, it's more about different ways we can combine those selectors, which really opens up some doors and can make our life a lot easier. So let's jump on over to what I've set up here. I have a simple demo, and as I said already, I hope you already know your element selector, your class selector, and your ID selector. If those are relatively new to you, or you're not comfortable with them yet, I do have a video that talks about them, so there should be a card popping up and a link in the description. But we want to move past that into sort of the next phase of selectors that we can get to. This is by no means going to be an exhaustive list. I want it to be things that from a very beginner level, you can sort of take that one next step up and do things from there. And the first thing we're going to be looking at is a couple of combinators, and there's some more advanced combinators you can definitely dive into. But I want to look for now at the descendant ones. And so here you can see this green box that I have set up right here is called, or it has the class of descendant on it, and I put that on there, and we're going to jump on over to my CSS. And here first, we have two different types of descendant selectors. The first one here is a general descendant selector. And the second one here is a direct child selector. So they're a little bit different from another, even though often they can actually seem very, very similar, especially early on. So what I'm going to say is I'm going to choose all my paragraphs that are inside the class of descendant, and we're going to switch their color over to orange red. And you can see all the paragraphs or all the text that is inside of there has switched over to be the color orange red. Now let's turn that one off and let's come and take a look at this one and turn that one on and hit save. And you'll notice it's only this first paragraph now that has actually changed and none of the other ones have. And the reason for that is is we're only looking for paragraphs that are a direct descendant of my descendant class. So coming here, this paragraph is a direct descendant. So it's the child of my descendant one here. Whereas this paragraph and everything that's over here is nested inside of another div. So because it's nested inside, it's not a direct descendant. It goes a few extra steps in and it's not selecting it. Both of these can be very, very useful. This one, when you want to be more specific and choose something that's only the direct child, whereas this one, if you need to select all the children or all the children of a certain type, then it can come in handy as well. Now a word of caution on descendant selectors like this. Some people do not like them because they raise the specificity of what we're working on. And if you're not really comfortable with specificity, I'm not going to deep dive it now. I have another video and I'll remind you at the end about that. It's a very important concept with CSS, though. And what that means is, say I came here and I said all my paragraphs should be color red. And you can see they've changed over to red, but this one is still blue. And this isn't based on the order of them because if I bring that down here, it's still blue. So it's not the order. It's the specificity. And if you're using VS code, you can hover over a selector and it shows you the specificity of it. We're here. We have a zero one one because we're combining the paragraph with the class selector here. So it gives us higher specificity than a simple paragraph selector. Some people really don't like that. I think as long as you're not going too crazy and selecting like paragraph and then span and then something else, you can probably get away with it and sometimes simplify your code a little bit by using them. But just do be a little bit careful if you do use it and know that some people prefer not using them at all and just using class selectors for everything. Next up, if we come down is the universal selector, which is just our star. So let's come down here, do star. And this is really common to see resets that do something like margin zero and just eliminate the margin and everything. Goodbye, margins. So we're just selecting every single element on our page and applying a property to it. Now, one thing with the universal selector, this is very popular or doing a box sizing of border box. This selects every element on our page except for pseudo elements. If you don't know what those are, we're going to cover them. That's one of the things that we're going to look at in this video. But just know that those are sort of common things that we see or common resets that you'll see. And they're on the star selector, which actually has a specificity of zero, which also makes it very easy to overwrite. The one thing I would not put on this is any of the font properties. If you're doing your font family or you're doing a color or other things like that, font size, line heights, all of those things. You can do those on your HTML or on your body. If I say body and do font family and then here do a serif, it's changing all of my fonts over to the serif already because this is relying on inheritance. And so it's better to place things that are inherited and that tends to be all your font properties on your body or on your HTML element and then just rely on inheritance. But for things like margin where they not inherited from one to the other, your margin, your padding and other stuff. That's why that's where it's quite common to see those reset with the universal selector. And of course, you don't have to use that to select everything. You could use that in combination with these, which could also come in handy sometimes. So we're sort of skipped ahead because of those margin shifts. But one time you'll see that and I don't want to get too advanced, but let's just come here. And if we go down, you'll see I have this even columns class. So on that even columns class that I have right here, I actually want to make some columns and I don't know how new you are. But let's select that we'll do even columns. And maybe you haven't got to flex box yet, but we're going to throw display flex on here anyway. And we're going to see that we actually get these different sized columns coming from here. They're definitely not even columns. And with the way flex box works, which is a layout tool. And if you haven't learned it yet, definitely will be something you're learning soon. But a common thing to do would be to do even columns and then choose all the direct descendants. So we're saying only if it's a direct descendant, we're not doing this, but only if it's a direct descendant, we're going to choose it no matter what it is. It could be a paragraph, a div, an article, whatever, it doesn't matter. And then we could do a flex one on there. Again, I'm not going to deep dive why I'm doing this exactly, but just to show you like sort of a other example of where the star selector can come in handy right there. So again, we're selecting all the direct descendants. So this div, this div and this div and the flex one is basically saying they all have to be the same size and behave in the same way with their growing and their shrinking, which makes it so we get three equal columns. So yeah, a couple of use cases there for the universal selector. And from there, let's move on to pseudo classes. You probably already know your hover and your focus. I'm sure you've come across something with those already, but just in case you haven't, let's move down to here and let's go and look at what we have in this area to play around with. So let's just go on this UL that I have right here. First of all, and we're going to choose that. So I'm going to say the UL and we're just going to throw a hover on there and say that the color is going to be red and hit save. So now when I hover on top of the UL with my mouse, the color changes to red. So in general, pseudo classes are very based on different states or different criteria for the element. So another example, hover is not really the practical one for a UL. You'd probably want to do this on a link. And if you're doing links, you should also include, you know, it's very common to see your A, you'll have your hover and then you'll also have an A focus on there as well. So we're selecting both of them and doing the same style. So whether we're using a mouse to select it or keyboard navigation where you can tab through links, then the both of them are going to have the same state on there where they're both changing over to red. If we go to that UL again, or actually, let's not do the UL, let's look in the UL, we have these allies. So looking at that, let's choose, we can just do all of them for now, it's fine. So we're going to say the LI and then as you can see here, I've listed off a few different ones. Let's save that so it stops updating. So on the LI, we could choose different, as I said, different states like hover or not hovering or hovering, I guess we're not doing a not hover, but we can choose something also based if it meets certain criteria. So we could do it if it's the first child. So let's do that first child is going to be a color of red and then only the first child becomes red. Of course, you could do this for other things that could be useful. For example, one place you'll see it use sometimes is on paragraphs. So you might have like article P first child or maybe it actually be of type, there's first child and I didn't put it in the list, but there's first of type. And then on that, the font size could be like a two rim. And so in a regular article that you might have on your page, the first paragraph, it's like the introduction paragraph is actually bigger than the other paragraphs. And you don't have to go and add a class to where you need to do that or something like that. We can select it using our direct child combinator, or we could do that as well, but it's a little bit more dangerous. So the direct child combinator with our paragraph, only if it's the first paragraph inside the article, while it come into effect. So that could be something useful right there. The other one other than first child that we listed is also enth child. Enth child, I could do a video just on enth child. It can be very, you know, I could say enth child too. We'll start there. Whoops, not enth child, sorry. And you'll see it selecting the second one, or I could do three and I could save, or I could do one and I could save. And this does not work like other programming languages that start counting at zero. This starts at one. So you just say which child you want and you can select things that way. Alternatively, you can do like a two N and it's going to select every second one, or I could do a three N. We're not really going to see it work here. You can also do even and it's going to select the even ones, or I could select all of the odd ones and do things that way as well. And you don't just have to be doing color. You can be doing backgrounds if you need like a zebra pattern on something, on a table or something like that. So there's different places you might want to use an even or an odd. Or as I said, you can do a three N and it's going to choose every third one, or you could choose every fourth one and you could do a lot more. I'm just covering the very basics and what we could actually do with enth child. So an interesting one there. Let's just put this to two N for every second one. Evens a little bit easier to read. So whichever one you want, they both work fine. And the last one I did there is the not. And not is an interesting one. And for not, let's jump back over to my HTML file for a second where I've set up this paragraph of example here. So we're going to go and we're going to select all my paragraphs first. We're going to say paragraphs. We're all going to be color and let's do my lime like that. So all my paragraphs are getting a lime color on them. But what we could actually do here is not.example. And now it's selecting every paragraph that does not have the class of example on it. So we're not selecting this one here. Kind of cool, right? You can actually combine that with like enth childs that are in here as well and other stuff and get kind of weird with it. But the not one can be very useful if you need to select a lot of things except for something very specific. Like you're selecting all your links. So you're doing a but not your like a nav link or something like that. So you want to select every link that's on your site but not your nav links or, you know, there's different things where it could sometimes come in handy. So the not selector, it's one of those ones that you might not see immediate use case for but then you're going to run into a situation where you're like, I wish I could do this but not select that. And then hopefully you go, wait, I can not select something. And remember to look up how it works. So a lot of CSS is not memorizing all of this stuff. It's just knowing it's possible and then looking it back up after. Don't feel like you need to memorize all of these because this is just scratching the surface. There's so much more. It's one of the reasons I love CSS is because there's always more to learn. But not everyone is always enthusiastic about it. But you do not need to memorize all of these things. That becomes very repetitious. These things start to sink in. So don't worry about it too much. Another one is pseudo elements. And there's a before and after that I'm not actually going to talk about in this video, but they're very common ones that you're going to see. And the reason I'm not going to talk about them right now is because I've deep dived them. So I'm going to put a link to the video in the description and another one that I'll remind you about at the end. Just because I could talk about them for a really long time and they're kind of specific in how they work. But let's turn this off because it's changing our list right there. But the ones that I will look at are the selection and the marker. Pseudo elements actually are very similar to pseudo classes. With pseudo classes, we have the single colon. With a pseudo element, it's just a double colon instead. And especially with the before and the after, they're injecting extra elements into the DOM. And it's basically letting us select new elements that weren't previously available in a way. Or it's sort of different states, but in a different way than pseudo classes are. I don't know. It's a little bit weird. But we can do a selection pseudo class. So selection. You got to spell it right. And let's say we're going to set a background on here of orange. And it probably won't look great. But now when I select stuff, the background color is orange instead of what was the default before. I don't even know. It was this blue color. So instead of the blue color, we can change that. You can change other stuff. And you can't change everything, but we could change the color over to black. And we can customize the selection, which always makes a nice touch on a site when you're playing around and doing something to have the selection color fit with your color scheme. Just make sure that the contrast with the text is high because people often will select something as they're reading it or they might select something. You want to make sure when it's selected, it's still easy to read. But as I said, you can't change everything within this. There is a limited set. So if you did something like font size here to, they would like break stuff. So it just doesn't work. So you're not changing font sizes or getting too crazy. But just for changing colors and doing other stuff like that, it can look kind of nice. And another one is the marker here because see how I have these bullet points? Well, let's say I have my UL and I could say marker and I could say color is purple. Let's say this time purple. And oh, it's not UL. It's LI, sorry. And you can see I've changed those over to that. And I think plum would actually look a bit better. Let's switch that over to plum. And I can change the marker of my LIs. So the bullet points and the numbered list, if it's an OL, those are called markers. I could change all of them just like this and it would do my ULs and my OLs or you could specify one or the other by just including that at the beginning of it. And interestingly, if you're doing an on-order list like we have here, you can also change the content of it. And let's put in an emoji here. So I forget the shortcut, but I have a custom key setup for it. But let's just come in and put the fire symbol or fire symbol emoji there and turn off the color. That should work. Oh, I did UL again, LI. That should have worked. And maybe something like that, so you're not changing the content of an OL. So we're using our direct child combinator again to make sure we're only looking at the ULs and you can actually change it with this content there to something other than just the simple dot. If you want to and play around, change the colors, do other stuff. This is another one that is limited in what you can change. You can't do anything you want to it. But you can do font sizes and play around with other things. Though if you go a little bit too crazy, it can be hard to align stuff properly and everything after that. So see it as like sort of limited changes you can make and not something that's a little bit too crazy. And this could be fun for a bullet list combined with like your nth childs and changing sort of cycling through different icons and stuff if you're looking for ways you can practice. And the last one that we're going to talk about is our attribute selectors. And what I've done is I've put all these links down here at the bottom. And I have this a href of this. So if we go and take a look at all the links we have down here, they all actually are going somewhere but I forgot to put this one and I forgot to tell it where to go to. So this is really interesting where I can write the entire href is equal to that there. So I'm selecting the href attribute that is equal to the hashtag and I could say color is red and only that link is going to get changed rather than all of them because it's the only one that has an href going nowhere. So a little like warning symbol like watch out this link isn't going anywhere yet. So if you did like a personal project where you had some blank links that you were going to fill in later it could be a good way to catch them. And of course you could do other stuff on here too. Like all of these have classes but let's say we take off link four here. And so all of them have classes except for this one right there. So on here I could actually say a class and it doesn't matter what the class is color is going to be we'll go with plum again I guess plum. And you can see they've all changed why are they all changed because I forgot to save my html page. There we go. So the socialize is not changing because it's the only one that doesn't have a class on it. Now interesting with the attribute selector you can do this putting only the attribute or you can do the entire thing so I could select a class that way like link three. So I could say is equal to link three and that would only select the link three my about page right there. But what I can't do is do something like having it that way. I can't just put a value here it won't work. I can either put only the attribute name or the attribute along with the value for that attribute. And of course if I'm just doing that I could just shorten that down to being a link three that way or just remove that completely and that would work just as well. So for classes and IDs it's kind of useless but for getting things like your href if you want to do something with a target and other things or there's certain attributes that can be on there every now and then the attribute selector can be really useful especially if you're using some javascript along with things as well and you have some data attributes that are on there if you're really new to stuff and you don't know what I'm talking about don't worry about it too much but there are some useful different selectors and combinators and stuff that you can use in your projects. As promised there is a couple of videos that I mentioned one on specificity and one on pseudo elements so those are right here for your viewing pleasure and with that I would really like to thank my Nablers 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