Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
In our last movie we discussed the new structural pseudo-class selectors available in CSS3. In this movie, I want to take a closer look at the syntax available for nth-child pseudo-class selectors. There are four nth-child selectors. nth-child, nth-last-child, nth- of-type, and nth-last-of-type. These are similar to the other structural selectors with one fairly important difference. They allow you to target multiple elements on the page based on a argument that you will then pass in to the selector.
Now for the most part, nth-type selectors are similar in syntax to other structural pseudo-class selectors. However, the syntax of the argument can seem a little daunting at first. Now I promise that once you delve into it little, it becomes pretty simple. First, before we get into the formula for determining which element is the target, I want to mention a pair of keywords you can use. You can pass even or odd into the selector to select all even elements or all odd elements within a parent. This is a great way to quickly alternate rows of colors and tables, lists or other repeating elements.
There are times, however, when you need to be a little bit more selective than that. Perhaps you want to select every third element or every second item after the fourth item in a list. And to do that, you will need to understand how to use the selection formula used by the argument to limit the amount of items returned. The formula is basically an+b, where n either represents the variable itself, meaning the number that you are passing in or a positive or negative integer that in turn sets a base value.
a and b are optional values. a is a grouping value. It denotes how far the selector should count before targeting a new item. b represents an offset value that determines where the selector should start counting. Confused? Well, don't be. Let's try an example. Okay. So here I have the 02_09.htm file opened and if I preview this in a browser, you can see it's just a very simple ordered list, items 1 through 15, and I have labeled them so it's really easy to tell which ones are being targeted.
We are going to write some very simple nth-child selectors that help us target those elements in that list. So we want to keep this page as simple as possible. You can look in the code and see that we have an empty style tag at the top of the document and that's where we are going to write our selectors. Okay. So let's go ahead and write a simple selector here. Let's type in li:nth-child and into that I am going to pass the number 2. And what I am going to do here and this is what we are going to do for all of our selectors, I am just going to type in color:red and what that's going to do for me is this just going to turn whatever is targeted by this particular example, red.
So again, if I save this, test it, you see indeed it went down, selected the second item and targeted it. So that was pretty simple. So if you pass just a single value in there, it's going to go down the list, find that particular item, and target it. Now let's make that a tad bit more complex. So let's type in 2n. So now what we're saying is every second value, so if I go ahead and save that and test it, notice that all of the even numbered items are selected.
So very two values on our list get selected. So what if I add our offset value? If I type in 2n+1. Now that offset value is essentially telling the browser where to start counting. In this case, we are saying start the count on the first item. So it'll start targeting the first item and then every second item after that, which in this case, and let me go ahead and save and test that, will be all of our odd numbered items, starting with 1 going to 3, 5, 7, 9 and so forth.
So that offset allows you to sort of move where the count starts. Let's reinforce that by changing that offset one more time. Let's say we want to start with the fifth item in our list and then select every third element after that. To do that, we would go ahead and write 3n for every third element, +5, which means starting with the fifth. So again, we will save that, preview it, and indeed it starts with the fifth item and then targets every third item after that. Fantastic! Okay. So that's pretty easy once you know what the values in the formula do.
Now things get a little more complicated when you start introducing negative values into the mix. Essentially, positive values count down through the list, just like that. Negative values, on the other hand, count up through the list. Now because of this, it is possible to use negative numbers that return nothing. If you are going to use negative numbers, make sure the values of a and b remain above zero. Let's go ahead and try some negative values to see how they affect the targeted elements. All right, so now, let's try -2n+8.
What that's going to do is it's just going to start counting at the eighth element in the list and then go up the list, or backwards if you will, every second element. So if I save this and test it, you can see that's exactly what it's doing. It's starting at eight and then it just sort of counting down till it reach to zero. So a negative grouping value counts you back up the list. Okay. We get that. But what does a negative offset value do? Well, that can be a little bit more complicated. Let's take a look in an example. If we go back into our code here and I change this to 3n-1.
Now since -1 is not a value in the element index, what the formula is going to do is it's going to take the resulting list and then offset it by one value. So let's go ahead and save that and test it. So instead of every third element, the count is actually starting at two and then moves to the next third element. It's essentially just taking the return value and offsetting by one, just sort of shifting the whole thing up by one if you will. Using nth-child selectors, you can combine selectors to create an amazing array of targeted ranges.
To combine selectors, you can use the basic grouping syntax, such as using a comma-separated list or if you need a contiguous array of selected elements, you can just sort of kind of daisy chain them together. I am going to show you how to do that. So let's say we want to select all items in this list except for the first three and the last three. So we want to select all the items on a list except for those first three items and the last three items. How in the world can we do that? Well, I am going to change my selector first to just sort of ignore the first three. So I am going to do 1n+4.
Now what is that going to do? Well, 1n says select them all. Now it's just going to give me every single one of them and then the offset says but don't start until number 4. So that's just going to select everything except for those first three. Now I need to add a grouping to do this and do that with no white space, I am just going to type in :nth and this time I am going to use last-child. So in this manner I'm grouping the nth-child and last-child together. Both of these values are going to be calculated to determine exactly what the range should be.
Now inside that one I am going to do the same thing, 1n+4. Now why am I doing that? Well, remember nth-last-child actually starts from the end of the list instead of the beginning of it. So again what this is going to do is it's just going to select all of them, because it's using 1n, but it's going to say but ignore the first three. Start with the fourth item from the end. So essentially, that's just going to give me all of them except for the first three and except for the last three. Let's see how that works. I will go ahead and save that, preview that in my browser, and again that's exactly what we've got. So the first three are ignored, the last three are ignored, which is really neat because it doesn't really matter how long this list is, the first three will always be ignored. The last three will always be ignored as well. Okay.
Let's see how we can combine some negative selectors in order to do something. What if we wanted to select just the first three and just the last three and then ignore everything else in between? That gets a little bit more complicated. So, we are going to say li:nth-child and what I am going to do here is -1n+3 and then I am going to change how we are grouping the nth-last-child together. I am simply going to do a comma- separated list this time and say li. So instead of daisy chaining them together and saying give me this contiguous range, I am saying give me this and then give me this.
Here I am going to change this one to -1 and +3 as well. Now what is this doing? Well remember, negative values count in the opposite direction. So -1 and +3 will start on the third item, select it, and then subtract 1 so it will select 2 and number 1. nth-last-child, because it normally counts backwards a list, in this case with a negative value, it will count forwards. So it's going to go to the third item from the end of the list, and then capture that one, and then target the second item and the first item from that as well. And we are grouping them together here with a comma-separated list instead of daisy chaining.
So I am going to save this and test it, and indeed that's exactly what it does. It selects the first three, the last three, and leaves all of the other ones alone. So why can't we group that selector using that same syntax and sort of daisy chaining them together? Because of the interruption in the element targeting and the direction of the index count, the fact we are going in opposite directions. If the targeting is contiguous, meaning it starts and then ends in a contiguous selection and then it counts up the index, you can use it. Now I know that's a lot to take in.
And if you're new to nth-child selectors, chances are you're still probably a little fuzzy on how the syntax works. I want to encourage you to practice writing nth-child selectors in order to get a better handle on it. Now create situations for yourself where you need to select a specific number or sequence of child elements. The more you work with nth-child selectors, the more comfortable you'll be writing them and writing them in the most efficient manner for that particular situation.
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.