Let's talk about child selector, which is part of the combinatorics.
So in the previous video we talk about the spacer or the descendant selector.
So what is child selector?
Well, the child selector is used to select all elements that are direct children of a specified element.
Well, the channel selector and the designer selector, sometimes they look a little bit same, but
there is big difference.
So let's see how it always, depending on the nature or the structure of your website, that determines
what kind of selector you want to use.
So one more time I have added one folder called Child Selector, and inside that I have simple HTML
syntax here with the same thing each one.
But differentiate.
Is that where inside this I have line number.
Let me have some PCA and then some space here and some space here to show you the structure of this
particular page.
Okay.
So let me show you right now.
Well, we have this particular parent or body, as we discussed before.
And we have the individual children.
Nothing new here.
But the key point here or they take away and grow attention here is that.
Look at this, Dave.
Okay.
You see that we have children inside h to the p tag and I have the the.
Put your eyes on the tag.
You see that inside this particular Dave?
This particular Dave.
Here, let me show it.
Dave.
Number one here.
This one we have.
How many peaks do we have?
We have p number one here and then P number two here.
So how can we style this particular element maybe guessing?
Well, we can just use P.
P element is to to start by this one.
Also have the same colour or the same style because it is also p.
But my idea is I want to style only the piece inside this particular Dave.
Dave number one.
How am I going to do it?
You may be guessing that.
Well, we can use the descendant selector.
Is it possible?
Let's see.
Okay.
Because we have the Dave here.
If I say Dave space p meaning we are selecting this P and this P, let's see if it is possible.
So let's see how we can use the child selector to select this particular element.
So inside this tile we bring in Dave that is the my target.
And inside I bring mine this symbol called greater than P and then now I'm going to select that one
and say that, well, I want to change the colour to red when I save it.
Look at something we're going to happen here.
Well, when I save it.
Hmm.
I have the first one being applied.
Why?
It is so well if I use spacer when I save it.
See that all the two has been selected because according to the sentence selector it always selects
all the task or element that descendant of the selected element.
Because this Dave is a selected element and we have two P's, one P here and two P's here, but this
one is not part of this selected element, so this won't be out.
That's why this one is going to be selected.
But instead we have these two.
But let's see, I want to select this one only meaning when we say the chance selector, meaning that
we want to select a main element that is direct child of the selected element.
But look here inside this p tag here, this photo, this a child of this.
Dave Because this this folder is a child, direct child of this.
Dave But inside the folder here we have p tag here.
So this P tag is not a direct child of this selected element.
That is why if you use that chance selector like this one, I'm going to select the first one because
the first one is the direct child of this.
Dave That is a differences.
So you cannot use care about if I use less than here.
No, no way.
If only equal to a two way.
Talk about maybe logical approaches in JavaScript that it's always like this one.
So that's the differences between the child selector and then the descendant selector.
The next video you talk about what is called a just sibling selector, using the plus sign in the next
video.