{"id":5452,"date":"2010-02-08T06:24:35","date_gmt":"2010-02-08T13:24:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5452"},"modified":"2022-05-26T08:07:59","modified_gmt":"2022-05-26T15:07:59","slug":"how-nth-child-works","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-nth-child-works\/","title":{"rendered":"How nth-child\u00a0Works"},"content":{"rendered":"\n
There is a CSS selector, really a pseudo-selector, called 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 It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even<\/strong> and odd<\/strong>. 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.<\/p>\n\n\n\n As seen in the first example, nth-child also accepts expressions<\/em> 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:<\/p>\n\n\n\n Let’s get back to the How about the 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 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, Using Sitepoint has a nice reference guide, which includes this handy-dandy table<\/a> which I’ll shamelessly republish here:<\/p>\n\n\n\n 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<\/a><\/code>. Here is an example of using it:<\/p>\n\n\n\n
ul li:nth-child(3n+3) { \n color: #ccc;\n}<\/code><\/pre>\n\n\n\n
:nth-child<\/code>? Let’s take a look.<\/p>\n\n\n\n\n\n\n\n
ul li:nth-child(5) { \n color: #ccc;\n}<\/code><\/pre>\n\n\n\n
3n+3<\/code> 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<\/code> as starting at zero and then a set of all positive integers. Then complete the expression. So the
3n<\/code> is “3xn”, and the whole expression together is “(3xn)+3”. Now substituting in the zero and positive integers, we get:<\/p>\n\n\n\n
(3 x 0) + 3 = 3 = 3rd Element\n(3 x 1) + 3 = 6 = 6th Element\n(3 x 2) + 3 = 9 = 9th Element\netc.<\/code><\/pre>\n\n\n\n
:nth-child(2n+1)<\/code>?<\/p>\n\n\n\n
(2 x 0) + 1 = 1 = 1st Element\n(2 x 1) + 1 = 3 = 3rd Element\n(2 x 2) + 1 = 5 = 5th Element\netc.<\/code><\/pre>\n\n\n\n
3n+0<\/code>, or even simpler
3n<\/code>.<\/p>\n\n\n\n
(3 x 0) = 0 = no match\n(3 x 1) = 3 = 3rd Element\n(3 x 2) = 6 = 6th Element\n(3 x 3) = 9 = 9th Element\netc.<\/code><\/pre>\n\n\n\n
4n-1<\/code>:<\/p>\n\n\n\n
(4 x 0) - 1 = -1 = no match\n(4 x 1) - 1 = 3 = 3rd Element\n(4 x 2) - 1 = 7 = 7th Element\netc.<\/code><\/pre>\n\n\n\n
-n<\/code> 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<\/code>:<\/p>\n\n\n\n
-0 + 3 = 3 = 3rd Element\n-1 + 3 = 2 = 2nd Element\n-2 + 3 = 1 = 1st Element\n-3 + 3 = 0 = no match\netc.<\/code><\/pre>\n\n\n\n
n<\/code><\/th>
2n+1<\/code><\/th>
4n+1<\/code><\/th>
4n+4<\/code><\/th>
4n<\/code><\/th>
5n-2<\/code><\/th>
-n+3<\/code><\/th><\/tr><\/thead>
0<\/th> 1<\/td> 1<\/td> 4<\/td> –<\/td> –<\/td> 3<\/td><\/tr> 1<\/th> 3<\/td> 5<\/td> 8<\/td> 4<\/td> 3<\/td> 2<\/td><\/tr> 2<\/th> 5<\/td> 9<\/td> 12<\/td> 8<\/td> 8<\/td> 1<\/td><\/tr> 3<\/th> 7<\/td> 13<\/td> 16<\/td> 12<\/td> 13<\/td> –<\/td><\/tr> 4<\/th> 9<\/td> 17<\/td> 20<\/td> 16<\/td> 18<\/td> –<\/td><\/tr> 5<\/th> 11<\/td> 21<\/td> 24<\/td> 20<\/td> 23<\/td> –<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n Browser support<\/h3>\n\n\n
\n\n
\n \nChrome<\/th>\n Safari<\/th>\n Firefox<\/th>\n Opera<\/th>\n IE<\/th>\n Android<\/th>\n iOS<\/th>\n<\/tr>\n<\/thead>\n \n Any<\/td>\n 3.2+<\/td>\n Any<\/td>\n 9.5+<\/td>\n 9+<\/td>\n Any<\/td>\n Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n Still not getting it?<\/h3>\n\n\n
:nth-child<\/code> tester page<\/a>. There, you can type in expressions and see the results of what it selects below.<\/p>\n\n\n\n