Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you're limited to only using element, class, and ID selectors, chances are your CSS would not be very efficient and that you'd be limited in terms of what you can achieve with your styling. Well, thankfully, there are many other powerful types of selectors, and some of which we'll explore in just a moment, but perhaps the most powerful targeting ability CSS gives us is the ability to combine selectors together in what is known as descendent selectors. By using descendent selectors we can more precisely target content based on the relationship between nested tags and their parents.
And I want to illustrate this for you. I have descendent.htm opened, and you can find this file in the 02_09 directory. And before we take a look at the code, I want to just preview this in the browser, so I'm just going to go ahead and preview this in one of our browsers. And you can see a lot of styling has already been done for us before we begin to style ourselves, but there are some styling goals that I want to achieve. First off, I want the site's main heading, which is this, to look visually very different from any other heading on the page. I also want the subheadings in the article to look a little bit different, and I am going to limit them to looking that way--maybe a certain color--only when they're within an article, in case the page content becomes a little bit more complex or it's used someplace else.
I want the headings in the asides, these two headings, to be similar in their styling to let you know that they're with an aside, but I want them also to be unique within their own aside. So I have to target them based on which aside they're inside of. And then finally, I want the body copy here inside this aside to be a little bit smaller, in terms of line spacing, and have some margins to adjust it inside the article itself. So those are some pretty big styling goals, and using just everyday normal element class and ID selectors, we really wouldn't be able to do this without adding a lot of non-semantic markup to our page.
So let's take a look at how descendent selectors can allow us to do this in a really, really simple way. Okay, so going back into the code, I'm just going to scroll down a little bit. And in order to use the descendent selector, you really have to understand the structure of your page. I can see that the site's main heading is inside the header element, and it's an h1. I can see the article has an h1 inside of it as well, and its subheading is an h2. So anytime I see a subheading within the article, it's going to be the h2 inside of this article tag.
For my asides, remember, I have two of those. One of them has a class of upcoming, so it's upcoming events, and then another one has specials, which is the sort of identifying in the monthly specials. Again, the paragraphs can be found inside those asides, and we can identify the aside itself by the class that's applied to it. Okay, so now that we know all of those sort of structural rules around these elements, we can write selectors to target them a little bit easier. So I'm going to go up to my styles, and I can see that the formatting has already been written for us.
So rather than focusing on all of the different formatting options, those have already been written. The only thing we need to do is write the proper selectors. Okay, so what I'm going to do is right here on line 60 I'm going to write a selector that targets the h1 tag found within the header. Now you might be used to reading from left to right, but browsers actually read these selectors from right to left. So let me show you what I mean. I'm going to type in header, so I'm looking inside of header tag, and then do a space and then do h1.
So that is a descendent selector. The whitespace matters. This is saying find every single h1 that you can find inside of a header. Then if I go down a little bit, I can also say article h2, and that is saying target every h2 that you find inside of an article, so it's very descriptive, very specific. So you're not limited to combining only element selectors; you can combine any selector types you want. So I can also say .upcoming, so remember, that's the class upcoming, h2.
So I'm saying hey, find any heading 2 that's inside of an element with the class upcoming applied to it. I can do the same thing right down here for our next word down here that says .specials h2. And you can see why it's so important that you know the structure of your code before you start writing these selectors. And finally, you're also not limited to only doing two; you can string as many together as you need. So I could say article aside p. Now it's going to say any paragraph inside of an aside element which is then found inside of an article element.
So that's getting really, really specific. So I am going to go ahead and save this, and I am going to go back to my browser and preview that. Okay, so here is all my formatting. Notice that the site's main heading now looks totally different than all the other headings on the page. Our subheadings inside the article have changed color and they only change color within the article. And our headings inside of our asides are similar except for the background color. So they do look the same, but they do identify also that they belong to different asides within there.
And then finally, our paragraphs are a tad bit smaller in terms of the line height, and we've got those margins that we talked about as well. Now, you we also want to focus on writing very efficient descendent selectors. So if I go back in my code, I can see that yes, this is targeting any paragraph inside of an aside which is inside of an article, but every single time you combine another selector to this, again you're adding to the overhead of what the browser has to do in order to process this. So if I remove article and just leave it as aside p and save that and go back to my browser, then I don't see any change in the formatting whatsoever, no change.
Whereas before I sort of had three of those elements combined into a single selector, two would do. So you want to make sure that you're using the most effective and efficient descendent selector possible. There's another thing that I want to point out here before we move on to our next movie, and that is what you're looking at is you're not looking at just the paragraphs that's immediately inside of an aside; you're looking at any paragraph inside of an aside. It doesn't matter how many elements are between them. So you could have an aside with a header or a footer or a section inside of it and then a div inside of that and then a paragraph inside of that and this selector would still work.
Don't take this one space by saying only paragraphs that are immediately inside of an aside. That's any paragraph inside of an aside. If you feel comfortable with this and you want to play around with it a little bit, why don't you come up with a few more styling goals and see if you can create the appropriate descendent selector to target those specific elements? You should practice using descendent selectors as often as you can, as you're going to be using them over and over and over again in your styles, and again, you're going to see them over and over and over again just within this course. When using them, just remember to try to keep them as small as possible, in terms of the amount selectors you're combining together.
Be mindful of styling conflicts that they might create with nested elements. We're going to focus on that a little bit more in the chapter on conflicting styles. And be sure to carefully study your page structure when planning your styles--that's really, really important. Understanding how content is structured is going to help you decide when descendent selectors are the best choice.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.