0:00
Yo guys, what's going on? This is CSS for Beginners Lesson 16, and today we're going
0:11
to look at child selectors. That's coming up. So once again we're back at this groovy
0:17
diagram and I'm just going to keep this pretty brief because we've already explained this
0:22
but last time we said that all of these here were descendants of the body tag. Now children
0:27
are slightly different. We take into account how many levels deep children go. So what we would
0:33
say is that this div tag here and this h1, those tags in yellow, are children of the body tag
0:40
And this h1 is a grandchild. It's not a direct child of the body tag. It's still a descendant
0:46
but it's not a child of the body tag. So that's the difference, okay? Now we know that
0:50
we're going to look at creating some CSS rules taking into account children in the HTML file
0:56
Okay, so I'm back here again and I've got exactly the same HTML file. I've totally stripped out the
1:02
syntax.css, so we're starting with a blank slate again. Now last time we looked at descendants
1:07
and we did a rule like this. We said main content, that's the parent, and p. So go get all these p
1:14
tags and give them a color of red. So that right there, my friends, is going to style all of these
1:19
p tags. This one and these two here, because they're all descendants of this main content id
1:25
Which is great, but say we don't want that. Say we just want to style these in a particular way
1:32
We don't want all the descendants to be styled the same way, just the direct children. That's where
1:37
the child combinator, that's what it's called, comes into play. I'm going to show you that in
1:42
a second, but remember, these two here are direct children of this div, because they're only one
1:48
level deep. This one here is not a direct child of this, because it's two levels deep. It's in here
1:55
this div, and then in here. So it's more of a grandchild. So we can't use the child combinator
2:02
to style this in relation to this, but we can use it to style these, because they're direct children
2:08
So how do we do that? Well, simple. All you need to do is come between your main content and your p
2:14
and we do the angle bracket forward, like a little arrow. That's saying that you want all the direct
2:21
children that are p tags. That's called the child combinator. That right here, the child
2:27
combinator, and we use it to select direct children. So now, instead of styling all of these p tags
2:33
this one, this one, and this one, this is saying, just get me the direct children, which are p tags
2:39
of the main content, and that's just these two here. So let's just save that and make sure we've
2:45
got everything right by viewing this in a browser. And yep, there we go. So it's just the top two p
2:56
tags here that have been styled red, according to our child combinator selector. And this one here
3:01
which is still a descendant, but not a direct child, remains black. That's perfect. So now we
3:09
know what child combinators are and how we use them within CSS rules to just grab direct children
3:16
So it's another tool for your CSS selector arsenal. If you have any questions about it
3:21
feel free to comment down below. If you enjoy these videos, please subscribe
3:26
like them, or share them. And I'm going to see you guys in the next one
