Compound & Descendant Selectors

[00:00:00]
>> Kevin Powell: We do have some other ways that we can write selectors as well or combine selectors together to come in with some very specific use cases. So this I wouldn't particularly do, but I do like showing compound selectors. They're not something I use a lot. Let's say you had an accent text and a bold text, one of them's making your text red, one's making it bold. I could give somebody a class of accent text and bold text, it would make it red and bold, but maybe I'm saying it's super important because it's both accent and bold, so then I could also add, if it has both classes on it, it will become underlined, and I just do that without having a space between them.

[00:00:35]
Again, I don't use those very often, but in certain situations, there's a possibility that there could be a good use case for them. You can also mix different types of selectors together, so an H2 that's an article title, a main that's your main content, a main article with sidebar inverted color scheme, you can layer things on. It tends to just complicate the CSS a little bit, which is one of the reasons I don't really like it.

[00:00:58]
If I have a main, I should only have one on a page anyway, so do I need the main content ID? Article title, maybe you need an H2 to be different from other ones, but just the class probably does the job, but you'll see things like this out there. So, an H2, that's an article title, a main that's your main content, etc. Descendant selectors are something, looks very similar, but they're a lot more useful in my own opinion.

[00:01:26]
So they allow us to select elements based on the relationship in the HTML. So in this example, I have a span inside this H1 that's right here, and I might want to select that span and change the color of it, for example. It's a nice thing that we can do with spans, but you might be tempted to do something like this. What would be the problem of doing this? Yeah, right, any span regardless of if it's in any, if there's a span somewhere else, it's also going to.

[00:01:55]
Exactly, yeah, so as we saw, element selectors select every single one of those elements. That might not be what we want. We only want to select the span if it's in the H1, so doing something like this is much safer instead. By having the space between the two selectors, we start here, we're saying I'm selecting every span, we read it backwards, so every span that is inside of an H1 or nested in an H1.

[00:02:18]
This doesn't matter how far or deeply nested it is either. So just really quickly, we can look at this CodePen where right now I'm saying header span and the color is orange red, so I've selected the span that's here, but I've also selected the span that's here that's nested deeper than those ones. So I have my header, any span that's in there will be getting that color on it. But spans over here in my main, that's down here at the bottom, it's not getting that color because we're not nested inside of that.

[00:02:51]
We can be a bit more specific with this by adding in a combinator. Combinator is a funky word for just saying like it's a way of controlling the relationship between the selectors, and instead of just the space, the space means any descendant. If we add in that guy right there, the closing triangle, then it's going to select spans that are a direct descendant of the header, which hasn't selected anything now.

[00:03:18]
I've broken things because this span is inside an H1, this span is inside a div, nothing is directly inside my header. If I change this to an H1 with a direct child span, now only this span is being selected because it's a direct child of my H1. We could use one of these in our project. So let's go look at the design and see if you guys can spot where we might want to use one. If we take a look at the design here, where is somewhere that I could use a descendant selector?

[00:03:50]
The last sentence of your lead paragraph. Oh, down here? Yeah, that definitely could be one. I was thinking of the title. Oh sure, but actually I'll talk about the title because I didn't look at that in too much detail, but let's open up that on the side. I should have had them both open. At the moment, all of this is showing up as yellow, probably would have highlighted it there. I have this entire thing as an H1.

[00:04:12]
A lot of times people are tempted to make this two elements because they look styled a little bit differently, but to me this is all one heading, books hard to follow, YouTube letting you down, learn chess the right way. That's a single heading that just has a little bit of different styling to emphasize the part that the marketing team or whatever wants to put emphasis on. So right there, you can see down here it already is, or I have the link, so the color was different, and I used a strong tag, so it was bold, but we could have done that with a span as well, you're right.

[00:04:44]
But so for up here, if we want to be able to do that, that means I have to come over to, we'll go to my index first, and books hard to follow. This actually is a bit of a question, do we put the span for the first half or the second half? What would make more sense? Amy, do you want to guess? I was going to say the first, first because it's different than the other. Sorry, I was going to say second because it's styling it more outside of the norm of the text.

[00:05:16]
Yeah, so both are correct. There's no right or wrong answer there. It's just you pick which one you think in your brain, it makes more sense, essentially. So I'm going to do it as the first one with the span, but there's no harm in having it be the second one. So on my index page, I can start with just a span right here. And then oops, I'll just cut that. Let's turn word wrap on. So books hard to follow, YouTube letting you down, and then I can close my span right there.

[00:05:48]
Nothing actually changes now cause spans don't actually do anything by themselves, they're basically a styling hook for us. So I can come down here, or actually I'm going to do it right here, H1, and I want to grab my span. So a span that's a direct child or any descendant of my H1, and the color on that for now I can just say is black. And then I get the two colors coming on one single element. Now, I want to talk quickly about nesting.

[00:06:16]
This is for modern fundamentals, nesting is part of modern CSS. My first word of caution is, if you don't understand it, you don't like nesting, there's no need to actually use nesting. But this is just another way that we can write it. It was a modern development. It came from preprocessors that existed before. Anyone here ever used a preprocessor like Sass or Less? Only Ryan, Matt. So, oh, Chris as well.

[00:06:39]
So preprocessors were, they're slowly dying, not dying, they're slowly falling out of favor just because a lot of modern CSS or a lot of their features are making their way into modern CSS nesting being one of them. And it just means we can write our selector like this instead of the way that we had it before. You can also create compound selectors and other things by using this ampersand. I'm not really going to, or actually we will see a use case for this a little bit later on, but the ampersand is a placeholder for the H2.

[00:07:09]
So this would be the same as writing H2, you know, you take the parent selector and you just put where the ampersand is. This type of example, it's not as useful. If you have more complex selectors, that's when it can start coming in, but if ever you run into it, I did want to throw that out there. Combinators, I already talked a bit about the direct child one. So we have the child combinator, we're selecting direct children.

[00:07:31]
There's two others that I'm not going to dive into in this course, but you might come across, which are the plus P or it's the plus combinator, which is the adjacent sibling or the next sibling. So this will select a paragraph that comes after the title, and only if it's immediately after something with a class of title, and there's the tilde. The tilde is anything that comes after, so this would be any paragraph that comes after a title.

[00:07:56]
They're a bit more advanced use cases, so just like if you're not used to nesting, you haven't seen it before, don't worry about it too much. I wouldn't stress about these. As you write more CSS you'll start coming across some use cases for them, but in your early days, I would say this is the one that potentially has the most use cases and that you'll probably be using and seeing in production along the way.