Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Of all the structural pseudo-class selectors, the most complex of them are the nth-child pseudo-class selectors. Nth-child selectors allow us to target elements based on patterns that describe which elements within a parent that you should target. Now we have four flavors of nth-child selector available to us. There is nth-child, nth of type, nth last child and last of type. Now the syntax of these selectors can seem a little odd the first time you see it. In fact, I've pulled up the Selectors Level 3 specification for you to take a quick look at this, and you can see here are a couple of examples of the nth-child syntax, and this is the symbol syntax.
So the first time you see this, it can be a little overwhelming. It looks like you're doing math. You've got this weird stuff going on here. But don't panic. It's actually pretty easy syntax. The only difference with nth-child and some of the others syntax that we are using is that you have the sort of argument that you can pass values into and that describes the pattern that is going to be targeted. It makes a lot more sense once you start working with it a little bit, so we are going to jump into our exercise files and start working with the nth-child selector. Okay, so here I've opened up the nth-child.htm, and you can find that in the 02_16 directory.
Now, very simple page structure. We just have an ordered list on the page and inside that ordered list there are twenty items, all list items, and we are going to use nth-child selectors to target some of those list items. Now we have some default styling. We just have sort of a beige background color for these and if I were to preview this in my browser, you can kind of see what we have going on here. We just have beige backgrounds for each of these list items. So what I am going to do is in the styles of my document, just below the existing li style, I am going to write a very simple nth-child selector.
I am going type in li:--so again it is a pseudo-class selector, li:--nth-child and then immediately after nth-child no spacing; I have to open up a parentheses. And what I am going to do here is I am just going to type in the number 2. So I am passing in the number 2. After that, I am going to open up my brackets and I am just going to type in background: tan. Okay, Aptana doesn't like tan, but I assure you, that color is supported by browsers.
So, again what we've got going on here is we are saying, hey, nth-child, go through the pattern and match it, and we are just passing the number 2, and that's going to tell it to target the second element within that pattern. So I am going to go ahead and preview that in my browser. So let me just refresh that, and you can see that indeed it goes ahead and targets the second item with that styling. So when you pass a single number in that, it's just going to count down through the items in the parent element, and it's going to target the one you're looking for. Now I want to point out something very important about this.
We are going to be using ordered lists for this example, and the ordered list is typically, in terms of children, it's going to just have list item children, but occasionally you're going to have repeating structures that have additional elements inside of it. That's very important for you to know that even though we are targeting list items, it's looking through every single child when it does this, not just list items. So for example, if I said p here, instead of a paragraph--this is bad syntax, so just bear with me for a second here; I am just illustrating the concept.
Now if I save this and preview that in my browser, it no longer gets that styling. It no longer gets that styling because the second item inside the ordered list is no longer a list item, so it has to match that. So that's one of the really important things. It's not just counting the list items; it's counting every element. Now that that's out of the way, let's take a look at how we could maybe modify this a little bit. I am going to change the 2 from 2 to 2n. Now this n is a grouping element.
Now in addition to having this sort of grouping, we do have keywords that we could use. So I could say, for example, I could say odd. Save that, test it, and now notice that every odd list item is getting that. I could also go ahead and type in even. It's another keyword I can use. And when I type in even, I would get the result that we had before. So we had the odd and even keyword, and we have groupings as well. Now in addition to being able to group things together, we also have what we call an offset. So if I type in 2n-- remember, that's what we just had-- so this is going to get every second.
Well, I can also do an offset. I can do +1. Now let me talk about what this offset is. This offset changes where you begin within the count. We always start counting at 1, but when you do an offset, it basically says okay, grab every second one, beginning with this one. So if I save this and test it, notice that that's just another way of doing every odd one, because it's saying start to count at 1, which is the first item, and then do every second one. So now we are getting all their odds. So that's what the offset allows us to do.
It requires a little bit of thinking, but let's say we wanted to start with the fifth element and then grab every fifth element after that. So to grab every fifth element, we would make sure our grouping says 5n and then to start at the fifth element, we want to make sure that we started at number 5, so 5n+5. So if I save this and test it, you can see it does exactly that for us. It starts at number 5 and then it gives us every fifth element after that. So really, once you know what these items within the selector are doing, it becomes pretty easy to target exactly what you're looking for.
Now in addition to the sort of simple formatting that we can do here, we can also use negative values, and negative values really dramatically change how this works. So let's take a look at that. I am going to change this grouping. Instead of 5, I am going to change it to -2, and then I am going to start with a count of 8. So what a negative number on the grouping does for us is instead of counting up the way it's done where you go every second, it's going to start wherever its count is and then it's going to go backwards. So instead of going down the list, it's going to go up the list.
By starting at number 8 it's going to go to the eighth item in the list, and then it's going to select every second one going backwards up the list. Let's check that out. So if I save this, preview this again, you can see what I am talking about. It starts at number eight, and then it targets every second one after that until it sort of runs out of it. So instead of counting down the list, the negative values cause it to count up. Now when you use a negative value for the offset, really strange things happen. Let me show you what I mean. So if I change my grouping to 5n, we know that's going to be every fifth element.
So if I do an offset. Instead of +1, I do -1, let's see what that does. So I am going to save this, preview this, and I can see that instead of every fifth element, now it's starting at number 4, and then I am getting every fifth element. So what's it doing there? Well, remember what that offset count does. If I had started, say, at number 5. By doing -1, essentially what it's doing for me is it's just shifting everything up by 1. So whereas before, it would grab 5 and 10, now it's shifting everything sort of up, if you will, in the count and I am starting at 4, but I am still spacing everything by 5.
So if we change that to 2, it does exactly what you'd expect: it just shifts up. So what if it started at 5, but it shifts up. These are fairly simple child selectors. Let's take a look at how we can make them a little bit more complex. I am going to do a comment, so that's /*, and then I am just going to do simple nth-child. And then at the end of this selector I'm going to do a */ and that ends the comment. Now below that, I am going to type in /* complex nth child and then a */ to end that comment.
So again /* starts a comment, */ ends it. So now let's take a look at a very complex nth-child selector. One of the things that you can do with nth-child selectors is you can kind of daisy-chain them together, and in sort of stringing these together you can target these very complex contiguous patterns. Let me show you what I mean. Let's type in li:nth-child(1n+6). All right, let's start about what this would do.
This is going to select every single element, every grouping of 1, and it's going have an offset of 6. So that would start with the sixth element and then it would just select every one there after that. Well, I can also group this, or daisy- chain it if you will, or combine it, with another nth-child selector. So immediately after that, I am going to type in :nth-last-child. Now we haven't used this one yet. So anything pass nth-child, like last- child, that's going to say go to the bottom of the list and start counting from the bottom of the list up.
Nth-child starts at the top of the list and counts down. So here we are going to say 1n+6. So we are doing the same thing. Now I am going to step outside of this and just go ahead and apply some basic formatting to that. I am going to do the same thing, background: tan. Now, let's talk about what this is going to do before we check it. We know that this is going to start at the sixth element and then just select every one after that. We know that this one is going to start from the sixth element at the end of our list, because again, this is an offset for last-child.
So the last-child would be the very last one, so if we do an offset by 6, that's counting up sixth element from the end, and it's going to select every element and up. So essentially what's going to happen is these guys are going to meet the middle. This is going to select all except for the first five elements and all except for the last five elements. Let's check it out. So I am going to save this and go back to my browser and preview that. And you can see it's doing exactly what we said it would do. It's going up to item number 6 and selecting every one from that point forward. The nth-last-child is going to item 15, which is the sixth offset, and going up.
So those two are meeting, and they're just sort of excluding the first five and excluding the last five. Now what if you wanted to go the opposite way with that and select only the first five and only the last five? Well, you can only daisy-chain, or sort of combine, these selectors like this when you have a contiguous selection. If your selection is noncontiguous, the only way that you can really do that is by grouping them. So let's see how we would do that. So I am going to go back to this selector, and I am going to change this to say -1+5.
Now remember what that would do. That would go to the fifth item and then because the grouping is negative -1, it would count up. So it would go the fifth item and it would select every item up to the first one. Now instead of being able to combine these together, I am going to have to do a grouping. So I am going to have to do, li: nth-last-child and I am going to do the same thing here, -1n+5. Again, what is this going to do? Because it's using last child, it's going to start at the very bottom. It's going to go up by five. So it's going to select fifth from the bottom and then because it's using a negative, instead of counting up the list towards the earlier ones, it's going to go down the list towards the last one.
So we are going to go ahead and save that, preview that in our browser, and we get the styling that we were expecting: first five and last five. Now look I know that that is a lot to take in if you've never worked with nth-child selectors and I don't want you to feel really upset if you don't get how the syntax works right off the bat. I really recommend using the exercise file that we've got here just as means of practicing, writing nth-child selectors. Sort of come up with these patterns in your mind and say using these selectors, how do I do that? You experiment with different values, experiment with different grouping selectors, experiment with negative values, and over time all this is going to become a lot clearer to you.
The more you work with these selectors, the more comfortable you're going to be writing them and writing them in the most efficient manner that you can for that particular situation. Now these selectors can be a little bit complex. As I mentioned before, there are actually multiple types of nth-child selectors. There are those four that we talked about. So be patient as you learn them, and don't rely on them until you feel like you have a really firm grasp of exactly which elements the selector will target. Again, for more information, be sure to go to the Selectors Level 3 Specification and look for the nth- child pseudo-class selectors.
They have a lot of examples here of syntax and a lot of extra information about it. So you can learn a lot just by going here as well and using the file that we just used to practice using some of these different formulas. Have fun using them. They're really powerful, really cool selectors that once you get the hang of, you will be using a lot.
Get unlimited access to all courses for just $25/month.Become a member