nth-child a pseudo-class

This pseudo-class matches the element or elements that are the nth-child of their parent. In other words it selects elements according to an equation inside the parentheses.

Next its an example

ul li:nth-child(3n+3){background:pink;}

( The real color for our pink is :#e65768 )

Here we are selecting every third "li" item inside any "ul", that is, the 3th, 6th, 9th, etc. But the magic it's inside the parentheses. The equation in the example would be working as follows with the "n" starting at zero.

(3 x 0) + 3 = 3 = 3rd Element<br/>
(3 x 1) + 3 = 6 = 6th Element<br/>
(3 x 2) + 3 = 9 = 9th Element<br/>
etc.

nth-child also accepts two keywords, "even" and "odd". Even selecting even numbered elements 2nd, 4th, 6th, etc. Odd selecting odd numbered elements 1st, 3th, 5th, etc.

Here are some other examples:

Select all but first five(n+6)<br/>
(0 + 6) = 6 = 6th Element<br/>
(1 + 6) = 7 = 7th Element<br/>
(2 + 6) = 8 = 8th Element <br/>
etc

Select first five(-n+5)<br/>
(0 + 5) = 5 = 5th Element<br/>
(-1 + 5) = 4 = 4th Element<br/>
(-2 + 5) = 3 = 3th Element<br/>
(-3 + 5) = 2 = 2nd Element<br/>
(-4 + 5) = 1 = 1st Element<br/>
etc

Select every fourth element, starting at the first (4n+1)<br/>
(4(0) + 1) = 1 = 1st Element<br/>
(4(1) + 1) = 5 = 5th Element<br/>
(4(2) + 1) = 9 = 9th Element<br/>
etc

Browser Compatibility

Opera gets totally confused in the dynamic test.

Here is a tester page to play with the equations and see the results.
nth-child tester

The tester was built by Chris Coyier and here you can read more about the nth pseudo-class.

Hope it helps!