CSS3 Tutorial for Beginners: 28 Child Selectors

This is Sasha and welcome to another CSS training video. Today, what I’d like to do is show with you child selectors and how they work so that way you can properly manage or edit your business website within your code. Let’s take a look at this CSS child selector and how it works.

Here what I’ve done in my page is I have two main divs. I have a color main and color second. With a child selector as you know, you could just style let’s just say if you want the divs and then you want all the paragraphs within that divs, I could go ahead and just do a div and then the paragraph tag and I could say” Well, what I’d like for that to happen is I want a color of let’s say green, okay?” I can go ahead and hit save on that and now as you go ahead and hit refresh, you can see the colors right there are refreshed.

All the paragraph tags – so including this one and including this one and these are color second so let me rewrite these. You can see that those right there within the paragraphs are green. If I change it to blue, I can go ahead and now they are blue.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

div p {color:blue;}

You can do the same thing with the H3 tag, so if I go to heading 3, I could go ahead and target the heading three tags, but this of course targets all of them, right? This aims all the H3s within a div. You have your top-level element, and then you target inside of that.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

div h3 {color:blue;}

What if I want to target only let’s say the paragraph right here in the color second. What you could do is you could go to let’s say a class and do color second and then target the H3 and now it’s only this bottom area right here that is targeted. Those are now blue.

If I wanted it green, I could go ahead and change it to green, and only that one is targeted. If I wanted to focus just the top ones then I could take a class from there and say it’s the color main, okay, and now we’re targeting the H3s up there or the heading 3 level tags.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

.colormain h3 {color:green;}

I can do the same thing with the P tag or the paragraph tag where now I’m only targeting this individual one paragraphs. You can see it’s a child, right, within a child.

The benefit of this as you can see is it’s mighty. Now, take for example doing it with classes, what you could do is also target it based on div elements, okay? Looking at it right now, we already did the div but let’s say this was a section tag instead of a div tag or even a footer tag, okay, so you could make it even a footer. Here we have a footer.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

.colormain p {color:green;}

Well, both of these are named color main, okay?” If I go ahead and hit refresh and now you can see that paragraph inside color main and color second are both green. What you could do is instead if I want to target the footer I could go ahead and say where it’s the footer that is the color main and then the paragraph tag or if I want to change it to the H3, let’s make it red, so it’s easier to see.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

footer.colormain h3 {color:red;}

I can target it specifically for the footer, and you can see how powerful this can be because when you’re aiming it like this, it allows you to get very specific where it’s the footer.colormain. If I had a space here, it wouldn’t target it or hit it because it’s looking for the next level of colormain. So in that case, I could go div class colormain, okay, and get rid of this and then maybe something like this so now it’s looking for a footer then a colormain then an H3 tag and then that works.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

footer .colormain h3 {color:red;}

We have a footer colormain tag or a class and then the H3 tag. If these are together that means it’s looking for a footer with a colormain property, okay? Let’s just undo some of these then it’s looking a footer with a colormain class and then it’ll work in that respect.

You can see how powerful this can be as you get more and more specific that, you know, the footer, the main color might be different. What you could do is then target let’s say the div with the colormain of blue, okay? You could see how that all of a sudden changes it or you could go to green, you know, you can start playing around with these things as you really start to see the main difference of that happens. and of course you could go ahead and say, “Okay.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

footer.colormain h3 {color:red;}
div.colormain h3 {color:green;}

And of course you could go ahead and say, “Okay. Well, I’ll go ahead and add a background.” I’ll add a background on this one, that one doesn’t have a background or maybe you could go ahead and say, “Okay, text decoration on that one is underline and you start doing things like that.” As you continue to evolve and expand on this, you can see how you can get very specific even though they have their colormain but one is a footer, one is just a standard div.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

footer.colormain h3 {color:red; text-decoration:underline;}
div.colormain h3 {color:green; background: #ccc;}

If you wanted to target all of the let’s say colormains, you could get rid of all those other things and target the colormain and hit in the H3, but then it would affect all of them.

Including the child or understanding the child, level, the hierarchy, the parent, the child, the next level, the next level, this can go on for quite a while. To show you a more detailed example let’s take things a little bit further.

-------------------- HTML CODE -----------------------




	Document

 

 

-------------------- CSS CODE -----------------------

.colormain h3 {color:red; text-decoration:underline;}

Here I have a, let’s say, a colormain, let’s say, I have an H3 tag or let’s go on paragraph H3 tag, that’s fine, then what we’ll do is we’ll hit this one with a bold, okay? We’ll do a bold here, and I’ll space it out so you can see how this is working.

We’ll do a bold and then on the inside, we’ll do an EM, okay? I’m targeting an EM tag and I’ll do the same thing kind of on the outside of this. We’ll just do EM on the outside, okay? Let’s take a look how this works.

I’ll have again a colormain right here, and you can see as I hit it, it works just fine. But let’s say I want to target that little EM level so I could go ahead and get very specific. I could tell div with the color of main that’s inside of an H3 tag that’s inside of an active tag that’s an EM, and that’s what going to be red and that’s what’s going to be underlined.

-------------------- HTML CODE -----------------------




	Document

Em on the outside

-------------------- CSS CODE -----------------------

div.colormain h3 strong em {color:red; text-decoration:underline;}

em{color:blue;}

Otherwise, if I just did the EM tag right here and I did let’s say color let’s do blue right here, you can see it’s going to target the one on the outside that’s blue. But I want to focus right here all of them the all of them will be there.

Let’s say the one on the inside, and I don’t want that one to be blue. In that case, you have to have the selector that’s very specific, and in this case, we have the div, the colormain, the H3, the strong, the EM, and that’s ultimately what you do to get very specific. When it’s that specific, it goes right into that little one right there, but it doesn’t affect the one on the outside.

Keep in that mind, the more specific you get, the more it targets it, and that’s how you can continue to get more and more specifically within your CSS within the child, within the selectors, within particular elements, within your website.