Parent-Child & Siblings Selectors

[00:00:00]
>> Okay, so we are gonna go back to our same code pen here where we're looking at our crazy unordered lists. And now I wanna move on to the parent child selectors. So an example of this, let us say that I want to select the li's here, let's say this li on line 11 and maybe the one here on line 12, but I don't wanna select all of the ones inside of the ordered list.

[00:00:27]
I just wanna select the li's that are or direct children of that ul with a class of nested. How might we go about doing that? Well, this is where, Okay, so this would be the parent-child selector. And this would be a case, where we might do something like that.

[00:00:56]
So we could say .nested, right? And then we use a > symbol and then say li. So in other words, the children of nested. Now sometimes you also see it written this way by the way, ul.nested. What does that means when it's all one word like that?
>> ul elements with the nested class,

[00:01:20]
>> Right, ul with the nested class. What if I did it this way? What would that mean?
>> Starting with ul elements, they're nested children direct list element and list item children to that.
>> Right, close, you've read it from left to right there, we wanna read them from right to left.

[00:01:38]
So anybody else wanna take another crack at that there are list items that our children of a class of nested, which is descended from a ul. Okay, so remember there could be a great big huge gap between that ul and the nested, right? Okay, but if we put them together with no space, then it is a ul with the class of nested together.

[00:02:03]
Okay, so here, let's say border: 2px dotted orange, so there they are. Doesn't display very well. Let me change that color, black. There we go. So now you see, here's the thing, another thing, and more things are the ones that are selected. The two inside there though number points number one and two, they still have that blue border on them.selected, those are not selected, okay?

[00:02:32]
So that is the purpose of a parent child selector, we wanna select just the immediate children. Where else do we see this type of pattern where we have a parent and then we have its immediate children have certain properties associated with it, anybody? That parent we just say it can do one thing and its children can do something else.

[00:02:53]
Flexbox and grid right, Flexbox and grid same kinda relationship. We just say display flexbox on the parent its children get very specific properties. Make sense? Same thing with display grid, its children get very specific property. So here's how we would write that out, this way. Okay, let's talk about siblings.

[00:03:17]
I don't really wanna talk about my brothers, but let's talk about siblings. So let's just continue on with that ul with a class of nested. We have some li's that are here, right? And we can select those particular li's In a very interesting way. So what I'm going to do, is I'm going to just say ul.nested and then I'm going to say li~li.

[00:03:53]
And I am going to set this to be, let's put some padding on him and let's make them green. So when I put this on, notice that it's going to select the same things that we had. Well, it'll actually select, It's gonna select the same li's. Here's a thing, here's another thing, and here's more things, but this time we're selecting the siblings here, okay?

[00:04:28]
So we'll close call them 1, 2, and 3. When I say that the color is green, how many of these li's are going to turn green? One, how many say one? One li's turns green, how many say two, two li's turned green? How many say three? Three li's turn green, nobody has any clue.

[00:04:54]
All right, so we'll just do it. Color green padding 1rem. Okay, so what's going on here? So we got the ul.nested li we did that before, so we know that those are affected from that part of the selector. li tilde li, this is the general sibling selector. So we're saying an li with a sibling of an li and it could be anywhere there in the list.

[00:05:28]
So here we have three of these siblings. And we've only selected though, the last two. Why isn't the first one selected? Because, The first one does not have a sibling that comes before it. So remember when you write this style of selector here, you have to have an li and the one that said the end is the one that's affected.

[00:05:54]
So, here we have the second sibling. Here's an li with a sibling of an li, right? Oops, or an li with a sibling of an li. This one down here also has a sibling of an li, all right? This one has a sibling, this one has siblings, but not that first one.

[00:06:19]
So that's what that means. Yes.
>> Isn't that siblings are defined by what comes after it? I don't quite understand why that first li isn't being selected.
>> So this is for any li with a sibling of an li. So here we would have to work our way up where we're working our way up the HTML.

[00:06:39]
This li doesn't have an li that comes before it.
>> Okay, and so-
>> And that's why it's not selected.
>> We would say that, that first li does not have a sibling, is that accurate
>> It has siblings, it's just doesn't have one that comes before it.

[00:06:54]
>> Okay, and that's what the selector is saying.
>> That's what the selector is saying when that comes before it, right? Weird, but true. If we looked at our ol here, Neither of those actually got selected. Does that even apply? Let's see. Ul nest, well, this doesn't apply.

[00:07:29]
That's not true that ul is not a child of the ol. So here we have only one li that is selected. So ul nested to the ol, that's not a direct relationship there, remember, there's an li in between. So we could say that, That's legal. Yep, just have to follow the patterns that are here in the HTML.

[00:07:59]
That is what we're looking at, what are the patterns, okay? Likewise, there's also a plus sign. This is gonna be harder to really differentiate between the general sibling selector and this next one which is the adjacent sibling selector, because they're gonna look like they select the same things here.

[00:08:19]
The adjacent sibling selector means that it is directly next to, these two siblings are next to each other. So it is, for example, the second and the third child, they are next to each other they would be selected in this particular case. The general sibling selector if we had the second child and the tenth child they're siblings, even though there are many siblings in between.

[00:08:40]
So the tilde would select those two, whereas the plus only selects the two that are right immediately next to each other. That is the difference between those two selectors. Yes.
>> So it's not the element that comes before it that is considered a sibling.
>> No, because we have to start with an li sort of think of it as like an anchor, and then we want the one that comes immediately after.

[00:09:05]
So here the second gets selected, the second has one, maybe it has one after it, those two would get selected. The third one has one immediately after it, those two gets selected. So sometimes you'll see a whole bunch of those selected, but just it's never the first one because it doesn't follow the same pattern.