Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Now that we have a handle on the syntax of child and sibling selectors, let's use them to target specific elements on our page. Now, I have the resources. htm file opened here in Chrome. There is a couple of things I'd like to do on this page to affect some of the typography. For example, I would really like to add a little bit more space above the subheadings than below them. I'd like to have a little bit of unbalanced space there to make that a little bit easier to read. Now, if I get down here to our checklist, I'd like to get rid of the margins of the main checklist and maybe make the text size a little smaller.
The problem here is that I want to make the text size smaller for both of them. So, if I target a list item, let's say I make this list item say 0.9em, well, if this list item is 0.9em, it's going to be 0.9em of this list item, because it's a child. So, essentially the inner list is going to keep getting smaller and that's something I need to account for in my selectors. So, one of the great things is all the stuff that we just talked about can be handled by using child and sibling selectors. So, here I am in Dreamweaver. Again, you can use whatever code editor you want.
I have the resources.htm file open, but the file that we're really interested in working on is the main.css. So here I am with my main.css file opened up and I am going to scroll down to about line of 414 right around in there. I have a little comment there that says sibling selector goes here. So that let's us know that we are where we are supposed to be. So, what I want to do is I want to target the heading 3's. Those are my subheadings, but I only want to target them when they come directly after a paragraph so that targeting when they're within the flow of an article.
Using child and sibling selectors, that's pretty easy to do. So what I'm going to do is create a brand-new selector. I am just going to say #mainContent #mainArticle. So, you can make these selectors as complex or simple as you need them to be. p + h3. So remember what this is going to be doing is this is going to be targeting any h3 that comes directly after a paragraph found within the mainArticle within the mainContent. Okay, I am go ahead and open up my brackets and then I am going to add the styling here.
Now, we are not going to do a whole lot to this. We're just going to affect the margins. So, I am going to type in margin. I want to do a top margin of 1.5em. So I do a top margin of 1.5, a right and left of 0, and a bottom of 0.5 em. So again, what this is going to do is this is going to give me a good bit of margin on top of the heading three and not quite as much underneath it, which will make the paragraph a little closer to us. So, it's just going to give some unbalanced spacing, which is going to make the readability a little nicer. While we're in our styles, why don't we go ahead and tackle the list as well? I am going to scroll down just a little bit to around line 440 or so.
You can see here is where we have our first unordered list styling and I'm just going to add this directly after that. Now, I want to remove all of the margins from my main list, but I don't want to remove the margins from my sublist. So, the nested list, I want those margins to remain, but I want the margins on my main list to be removed. That's a tricky selector to write, because if I just said mainArticle ul, as we've done here, that would target both of those unordered lists, both the main one and the nested one. So here I am going to use my child selectors to help me with this.
So, I want to type in #mainContent #mainArticle and then I am going to do the > ul. So again that's targeting any ul that is a direct child of mainArticle, not nested several layers deep but a direct child of mainArticle. So again, I'm going to come in here and I'm just going to do a margin of 0. I just want to remove all the margins. Perfect! So, that's going to strip the margins from that main unordered list, but leave the nested list alone. Awesome! Now, we do have another selector that we need to write it's a tad bit tricky to write.
I want to a little bit more spacing between the list items in the main list and I want the font size to be shrunk down a little bit. Now, I could write just a general selector that targets a list item in order to do that, but a general selector would probably target both list items. One of the big problems with using relative sizing such as em for font sizing is if you tell a list item to be say 80% or 0.9em or of some size like that, it looks to the parent element to calculate its size. So when you have a nested list item, if it's getting 0.9em, it's getting 0.9em of 0.9em and therefore it's going to be little smaller.
So it's a very tricky selector to deal with and lot of people will do that by resetting your nested list items 100%. Well, using child selectors, we don't have to do that. Let me show you what I mean. I'm going to type in #mainContent #mainArticle, and this is where it's gets kind of tricky. I am going to do a child selector for ul just like we did before, but then I am going to do another child selector for li. Now, how about that? Now, that's a little tricky. You can sort of daisy chain these child selectors together.
So what is this doing is targeting any list item that is a direct child of an unordered list that is a direct child of mainArticle. That means the nested list will not be targeted by this selector. It's not a direct child of mainArticle. It's a direct child of the list item. And the reason that works is because it's only targeting list items that are direct child of unordered lists that arein turn direct children of mainArticle. The nested list doesn't qualify for that so it will be ignored. Cool, huh? So again, I am going to open up my brackets and we're just going do some very simple styling here.
I am going to do a margin bottom, so we'll do a bottom-margin of 1.2em. What this should do is give us a little bit more spacing between the individual list items in our main list. And then the last thing I want to do is change my font size and I am going to do my font-size of 0.9em, just kind of make it a tad bit smaller than the rest of the body copy. Now, I want you to notice here though that I have another selector that's setting the font-size to 100%. So, what this means is that the nested list items are going to get that 100% size and due to the specificity of this selector all other list items, in this case the main ones, will get this font-size.
So I'm just going to go ahead and do a Save All, I'm going to test this in a browser, and first thing I'm going to look at is my headings. I can see I have more space above these headlines than below them. So perfect, that's exactly the spacing that I want. And when I go back down into my list, I can see that I have more spacing between the main list items than I do the nested lists, and I can see that the font size is a little bit smaller for list items, but it's consistent. All the list items are the same size. Perfect! That's exactly what I was looking for.
Although, they were first defined in the CSS 2.1 specification, child and sibling selectors are not widely used, which actually is very surprising to me. As you can see they give you a wonderful ability to refine element targeting without writing convoluted selectors or resorting to creating unnecessary classes. If you've never worked with child or sibling selectors, give them a try in your next project. Although browser support is widespread, if you need to target older browsers, especially Internet Explorer 6, you might need to have an alternate means of providing the styling.
Otherwise, I think you'll find them a valuable tool within your styles.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.