How nth-child Works

How nth-child Works

There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it:

ul li:nth-child(3n+3) {  
  color: #ccc;

What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? Let’s take a look.

It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. Those should be pretty obvious. “Even” selects even numbered elements, like the 2nd, 4th, 6th, etc. “Odd” selects odd numbered elements, like 1st, 3rd, 5th, etc.

As seen in the first example, nth-child also accepts expressions in between those parentheses. The simplest possible expression? Just a number. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 5th element:

ul li:nth-child(5) {  
  color: #ccc;

Let’s get back to the “3n+3” from the original example though. How does that work? Why does it select every third element? The trick is understanding the “n” and algebraic expression that represents. Think of “n” as starting at zero and then a set of all positive integers. Then complete the expression. So the 3n is “3xn”, and the whole expression together is “(3xn)+3”. Now substituting in the zero and positive integers, we get:

(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element

How about the :nth-child(2n+1)?

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element

Hey wait! That’s the same as “odd”, so probably don’t need to use that one very often. But wait now. Haven’t we exposed our original example as being overly complicated? What if instead of “3n+3”, we used “3n+0”, or even simpler “3n”.

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element

So as you can see, the matches are exactly the same, no need for the “+3”. We can use negative n values, as well as use subtraction in the expressions. For example, 4n-1:

(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element

Using “-n” values seems a little weird, because if the end result is negative there is no match, so you’ll need to add to the expression to get it back positive again. As it turns out, this is a rather clever technique. You can use it to select the “first n elements” with “-n+3”:

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match

Sitepoint has a nice reference guide, which includes this handy-dandy table which I’ll shamelessly republish here:

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13
4 9 17 20 16 18
5 11 21 24 20 23

Browser Compatibility

nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. So when it comes to it’s use, if the end result is “progressive enhancement” in some fashion (e.g. applying a cool color palette to table rows, for example), then by all means, go for it. But you probably shouldn’t use it if you are doing something more important, like relying on it for site structure. For example, removing the right margin from every third box in a three by three grid of boxes, so they will fit properly.

One saving grace here is that if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer.

Still not getting it?

I’m not a big fan of the phrase “I’m a visual learner”. Of course you are, everybody is. Visual aids are enormously helpful in situations just like this. To help, I put together a little nth-child tester page. There, you can type in expressions and see the results of what it selects below.

Also see this page of useful nth-child recipes for quick copy-and-paste code on the most common positional selecting needs.

796 total views, 1 views today

Loading Facebook Comments ...

2 Comments. Leave new

Awesome Post!! Loved It!! Keep Posting My Friend.. :)

eebest8 Amen
March 25, 2015 9:44 pm

Very clear internet site, thanks for this post.


Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins