The Nth Child Selector in jQuery

Ryan Sadwick — Mon, 16 May 2011 20:05:01 +0000

The :nth-child() selector in jQuery is fun to use and really helps out when you have a nice design that needs you to take full advantage of it.

Consider this layout below:

This layout has three items. The middle item has a shadow. While this could be solved by some hard coded CSS… what if this is a dynamic news list (which is what it is!) where the total number of news items change daily.

To solve this, we’ll make use of the Nth Child selector. But first, let’s consider a simple example so you can better understand what we’re going to do.

A simple example

Let’s say we have two unordered lists. We need to color the background of the second item in each list:

In jQuery, we can set the nth-child to 2. Then, let’s chain with some css and change the background color:

:nth-child(n) is "1-indexed". You may realize that this is unusual since most of jQuery’s selectors are 0 based. This selector is different since it’s derived from the CSS specification.

Click here to see the first example via jsFiddle

Now, this will only color the background of the second item in the list. Going back to our original problem, we need to color the background of every second item.

Back to the original problem.

This news section will have 9 news items. However, we don’t want to hard wire our news display to 9. We may want to change it later on down the line, so it needs to be ready to accept change at any time.

We need a solution that can select every second item in our news list. So that would be the 2nd, 5th, 8th, etc. Consider that being the pattern we’ll use. This pattern will be used over and over again, regardless of how many news items there are.

Enter the nth-child.

Click here to see the second example via jsFiddle

So we’re using 3n+2. What does that mean, you ask? Remember our pattern? Every second item in our list, regardless of how many news items there are, we will change the background item.>

Think of 3n has our pattern. Think of 2 as our starting point. We are coloring the background of the 2nd element right off the bat. So now we need to get the next item to color. We’ll use this expression:

(3 x 1) + 2.

The next item that needs to be colored is 5. We keep looping through, so to figure out the next item, we’d use:

(3 x 2) + 2.

That comes out to 8. I will keep going to illustrate how this expression works.

We keep looping, so 3 x 3 = 9 + 2 = 11. So the 11th element gets some shadowing love. So, let’s show our work:

(3 x 0) + 2 = 2= 2nd Element
(3 x 1) + 2 = 5= 5th Element
(3 x 2) + 2= 8 = 8th Element
(3 x 3) + 2 = 11th element
and so on.

We don’t care how many news items there are total, we can easily change the markup to be dynamic. So whether your news comes from a database, rss feed, or from wordpress, the visual result will always be the same: every second item will have the background image changed.

Why use jQuery instead of pure CSS?

The nth child css pseudo-selector is not supported in Internet Explorer 8 and below. However, using this jQuery nth child selector, this solution works IE!

The Canvas of Ryan SadwickTag Archive | nth child | The Canvas of Ryan Sadwick

The Nth Child Selector in jQuery

A simple example

Back to the original problem.

Enter the nth-child.

Why use jQuery instead of pure CSS?

Source code