Targeting list items with CSS3 nth child
Video: Targeting list items with CSS3 nth childWhen you're working with a series of list items, especially if it's a long list, it might be fitting to provide styling for alternate items like colored rows in a table. Until CSS3, the only way to accomplish this would be to assign different classes to every other list item and then create the CSS Rules accordingly. CSS3 includes a new type of selector called nth-child, which allows for easy styling of odd and even list items. Let me show you how to use this new selector. I have the resources.htm file from the Chapter 8 > 08_04 folder on screen, and we're in Design View at the moment.
- Next steps
Viewers: in countries Watching now:
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Targeting list items with CSS3 nth child
When you're working with a series of list items, especially if it's a long list, it might be fitting to provide styling for alternate items like colored rows in a table. Until CSS3, the only way to accomplish this would be to assign different classes to every other list item and then create the CSS Rules accordingly. CSS3 includes a new type of selector called nth-child, which allows for easy styling of odd and even list items. Let me show you how to use this new selector. I have the resources.htm file from the Chapter 8 > 08_04 folder on screen, and we're in Design View at the moment.
So what we want to do is to take the list items that are shown here and make every other one stand out. So we'll do that by creating a new CSS rule that targets the odd items in the list. So I'm going to place by cursor in the first list item just so I can kind of preload the New CSS Rule definition box with the Selector, and let me close the Files panel, and then we'll click on New CSS Rule.
There you can see my Compound Selector. I'm going to make it a little bit less specific, and then a little bit more specific. So after the LI or List Item tag, I'm going to add in a pseudo-class with a colon, the term nth-child. Now I want to add a parenthesis after this to tell it which of the child elements that I am targeting and there are some keywords that you can use with this selector, odd or even if you wanted, but put in odd and then close the parenthesis.
So now I'll click OK, and let's go to the Background category. I'm going to actually sample the background color, it's the tan color that we see over here, so that it fits in with our site, and I'll click OK. Now it won't show up in Design View, so go into Live View, and scroll down, and there's our background color on every other item. Now, we're fine on the outer list, and it actually even picks it up on the inner list.
But let's say that for design purposes, you didn't want to have the background element appearing on a nested list. How would you handle that? Well, the way you do it is to, of course, create another CSS rule. So let me go ahead and put my cursor in the first item of the nested ordered list and again choose New CSS Rule. I'll remove the wrapper specification there by clicking Less Specific, and I don't actually want the span tag here.
So I'll remove that, and then after list item or LI, I'll add-in my nth-child pseudo-class, :nth-child, parenthesis, and we still want to target the odd ones because we're going to remove that background color. So I will put in the keyword odd, and click OK. Now, go to the Background category, and instead of having the tan background, let's just make that a white background, so that that will get rid of the coloration there, and I'll click OK, and our background color is gone.
Now, you may ask why didn't you just set the background color to None? Well, with nth-child that doesn't work. For whatever reason, whether it's a bug or intended, I found that you need to explicitly set the color to whatever the current background color is. Browser support for this nth- child selector is surprisingly robust. It includes all recent browser versions from Firefox, Safari, Opera and even with version 9 Internet Explorer. In addition to odd and even options, the nth-child selector can also target specific list items by using a single value, such as a 3.
Let me show you what I mean. So I'm going to go all the way down to the bottom of my main.css file there, and let me scroll over in Live View, and I'll go up to show the first three items there. So you'll recall that our first rule that we set up was this one and now instead of odd, I'm going to replace odd with the number 3, and when I click back in to Live View, only my third item is highlighted or affected by this rule.
Now, you can also do formulas. So if I wanted every third item to appear, the formula is 3n+3 and once you click in to Live View, the WebKit browser will evaluate that formula and apply it to every third item and we'll get something really strange because every third item includes the ordered list here; obviously not what you want to do. So you can stick with the keywords, target specific values, or in certain cases, use the formula capabilities of the nth-child selector.
If you're like me, the next question will be can I use the nth-child on table elements like TR tags? And the answer is, yes, you certainly can.
There are currently no FAQs about Typography with CSS in Dreamweaver.