css3 - 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
etc.

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
etc.

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
etc.

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
etc.

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
etc.

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

n2n+14n+14n+44n5n-2-n+30114–31358432259128813713161213-4917201618-51121242023-

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.

• See more at: http://navalnagar.tumblr.com/post/96443463203/how-nth-child-works#sthash.5RhYSQ4Q.dpuf