Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
Child selectors are very similar to descendent selectors in that they take advantage of the parent-to-child relationship when targeting elements on the page. Unlike descendent selectors, however, they don't apply to all descendents of that parent element, only the elements that are the direct children of the parent. Now I know that sounds like splitting here, so let's take a closer look at what that means as we explore the syntax of child selectors. So here I have the child.htm file open, and you find that in the Chapter 02 folder, 02_10. And I am just going to preview this in the browser after we talk about the structure for a second.
So if I scroll down into the actual HTML itself, you can see that it's very similar to the file that we just worked with. Here we have a header with an h1 side of it. We have an article with some paragraphs and an h2. We have those two asides, and both of them have class attributes for upcoming and specials, and they have h2s as well. Well, it's the h2s inside the asides that I really want to talk about for a moment here. Notice that both of these asides are also located inside of this parent article tag, so they are part of that.
So when we go up to our styles and we can see that we have this article h2. Well, if I preview that in my browser, I can see that the h2 within the articles is getting the styling, but the h2s inside the asides are as well. Remember, descendent selectors don't care how deep into the structure of the page they go; they are going to target any h2 inside that article. So child selectors can help us limit the styling to h2s that are only direct children of the article.
Let's see how that works. So I am going to go back into Aptana studio, and I am just going to modify our article h2 selector here by using what's known as a child combinator. We do that by using the greater than symbol, and that's it. That's all we have to do. So the greater than symbol is called a child combinator. Whitespace does not matter. I could go ahead and write the syntax like this, where we have no whitespace, or I could add whitespace on either side, if that makes it more readable for you. It doesn't really matter. In this case, whitespace doesn't matter one way or the other.
So what this is saying is it's saying that hey, go find any h2 that is a direct child of article, meaning just inside of it and not nested in another element deeper within. So if I save this and I go back and preview this in our browser again--so let me just go ahead and refresh this page-- you can see that the h2 inside of the article that's immediately inside of it still has that styling, but now these h2s inside the asides don't have that styling anymore. So, really cool! Let's go take a look at some of the other ways that we can use child selectors.
So if I scroll down into the HTML, I can see that we have a few lists down here in the asides. So they are mainly unordered lists, but inside of them, they have ordered lists sort of nested in them. So we have one here, and then we have one here that pretty much has the same structure: an unordered or bulleted list with an ordered list inside of it. Okay, so I am going to scroll up just a little bit here inside my styles again and right after my last style, I am going to write a new selector that is ol > li.
So I like to say greater than, but really, you should just remind yourself it's the child combinator. That's weird syntax, but that is exactly what it is. So ol > li. Okay, so let's go ahead and add some styling to this. I am just going to say font-style: italic, and for color, we are going to do red. So I am going to go ahead and save that. And if I preview this in my browser and scroll down to these lists, I can see that it's applying to both of those lists, because both of them have those list items directly inside of an ordered list, or in ol.
So right there it's going to apply to both of them. Well, these child selectors can be combined, just like any other selector, into a descendent selector. You can remember those from the previous movie. We just used the whitespace to say, hey, any one of this instance inside of an element. So let's go ahead and refine this selector a little bit by making it part of a larger overall descendent selector. So if I limit this, if I say, hey, aside ol, child combinator, li, I know that looks really confusing, but this is one selector and this is one selector.
If it helps you remember that a little bit more, you can remove the whitespacing from there and maybe that looks a little bit more descriptive. Essentially what this selector is saying is hey, any list item that's found immediately inside of an ordered list, which is also found inside of an aside, that's who I want to target. So this is incredibly specific. So again, if I save this, go back out to my browser and refresh it, you'll notice that now only the ordered list inside the aside is being targeted, and the one outside of it is not.
So child selectors are really, really cool. You're probably not going to use them as much as descendent selectors. It is, however, nice to know that you have the option of limiting style application to only the direct children of an element when you need it.
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.