- The real power of the nth-child selector is its ability to target multiple elements based on repeating patterns. To understand how that works, we're gonna have to explore the pattern matching formula and how its values work. So to explore that syntax I'm gonna be using the patterns.htm file. Now I'm gonna scroll down just a little bit to go down here into the syntax. And you can see that I have two syntax examples. The first one, we target every second item, nth-child, and in the parentheses is passed a 2n.
Now below that, we have another example that says nth-child(2n+4), which would match every second item starting with the fourth item. Now the first time you see this, it can be a little bit confusing, so I want to explain to you how the pattern matching formula works. To do that, I'm gonna scroll back up here to the summary text that I have where I kind of go over the formula a little bit, because I think I've got some examples here that can explain this a little bit better. So the formula itself is basically (an+b). Now, we're not back in algebra, and don't get nervous.
I know a lot of designers start to sweat a little bit when math is involved, but this is actually really simple. So 'a' is gonna be the number that you want to match in terms of the pattern. The 'n' basically indicates that this pattern should repeat. So 2n, every second item. 4n, every fourth item, so forth and so on. And then 'b' is optional, and it is a starting offset, meaning I want to start counting at a certain number. So, the examples I have here, the value 3n would match every third item, 3, 6, 9.
The value (3n+2) would say, "Hey, I want to repeat every third item, but I want to start on the second item." So 2, 5, 8 and so forth. Sometimes you can actually do redundant values, so (2n+2) would say, "Hey, I want to repeat every second item starting with the second item." which is the same as saying 2n. You can also use negative values, which we'll get into a little bit more when we start doing things like counting from backwards. But, the negative values from a and b, when combined, have to result in a positive value or nothing is returned.
So a value like (-2n+10) would actually start at 10 and then count backwards by 2. Like I said, we'll explore that in more detail a little bit later on. So to experiment with this pattern matching formula, I've got two items below in the example area that we're gonna be using. One is simply a list that has ten items inside of it. The second one is a definition list that has some terms and some definitions And notice that we have multiple definitions in one of the terms, as well. Okay, so I'm gonna open up the exact same file here, patterns.htm, in my code editor.
And again, just to show you the structure inside the code itself, we've got an unordered list with ten items inside of it and then a very basic definition list. Okay, so up in my styles I'm gonna go ahead and write my first selector. In this case, I'm just gonna do 'li' to target list items, and then :nth-child, so remember, no space between the colon and the list item. And I'm just gonna pass the number 2 into that. So this is exactly the same syntax that we did in the previous exercise.
And I'm just gonna set the color of this to red. This is just gonna give us a starting point. So without using the pattern matching formula, if I just say the number 2, save that, and then go back to my list, it's gonna target the second item on the list. Now that's exactly what we expect having learned the basic syntax in the previous exercise. However, if we add the pattern matching formula to that and change that to 2n, so lowercase n directly after the 2, if I save that and refresh you'll notice that now it repeats and we target every second item.
That's exactly the same as using the 'even' keyword. So a lot of times the pattern matching formula will be the same as the keywords, and either of them would work just fine. Now if we want to experiment a little bit with that offset, we could add to this. So for example, I could say (2n+2). Now, I don't have to use the white space there, but it just makes things a little bit more readable. So I'm gonna say (2n+2), save that, and if I refresh the page you'll see that it makes absolutely no difference. The reason for that is because that offset where I say (2n+2) is doing the same thing.
It's already starting at the second item. But if I change the offset, if I come in and say, "Well, let's do (2n+1)." So that's saying, "Hey, offset it starting at the first element." And refresh. You can see that it changes, and now you can see that every second list item, starting with the first one, is selected, so that's actually the same as the keyword 'odd'. Now you don't have to start at the first or second one. You can take that offset as far as you want. So if I said +5 and saved it, you can see that it begins at the fifth item and now continues on.
So that pattern matching is extremely powerful. Now it does have some limitations, however. Let me show you. If I go back into my styles, and let's say we target our definition list, down below that. Let's say I do something like dt:nth-child. And let's just say we do every third, so (3n+1), starting at the first one. And let's just change its color to something like green. Alright, so let's save this, and let's talk about what maybe we expect to happen here.
So we're saying, "Go find our terms "in our definition list and every third item "I want to be green, starting with the first one." If I scroll down and take a look at this, you can see that we have one, two, three, four, five, six definition terms. So, every third one starting for the first one would be this one, and then one, two, three, and then number three, one, two. So we should expect to see two of these targeted, and we should expect to see the first one and the third one, we think.
But if I save this and I refresh this, you can see that it does, in fact, target the first one, but it also targets the fourth one. And you might be wondering exactly why this is happening. That's basically because using the nth-child selector this way is sibling neutral, meaning it counts every single sibling regardless of element type. That means that we started with the first one and then we began to count every third. One, two, three. Is that a term? If it is, color it.
One, two, three. Is that a term? If it is, color it. One, two, three. Is that a term? Yes it is, so color it. So basically it ignores the type of element that you're looking at and just counts siblings. If you receive a match, then the styling is applied. If a match isn't found, the styling is not applied. So that is one of the limitations of the nth-child selector, as far as we're using it here. You know, the ability to match repeating patterns is extremely powerful, but it doesn't work all that well if you have multiple element types in the same parent or if your code patterns are gonna vary slightly from instance to instance.
So in those cases, you'll need a way to match patterns based on the type of element that you're targeting, and that's something we'll explore next.
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors