:nth-child()

The :nth-child() is a CSS pseudo-class selector that allows you to select elements based on their index (source order) inside their container.

You can pass in a positive number as an argument to :nth-child(), which will select the one element whose index inside its parent matches the argument of :nth-child(). For example, li:nth-child(3) will select the list item with an index value 3; that is, it will select the third list item.

You can also pass in one of two predefined keywords: even and odd. li:nth-child(even) will select all list items with even index numbers (2, 4, 6, 8, etc.), and li:nth-child(odd) will select all list items with odd index numbers (1, 3, 5, 7, etc.).

:nth-child() also allows you to select one or more elements using a formula (or an equation)—an+b—that is passed to it as an argument. The syntax is :nth-child(<em>a</em>n+<em>b</em>), where you replace a and b with integer values of your own so that, after n is substituted with positive numbers (0, 1, 2, 3, etc.), the resulting number is the index of the element you want to select. For example, :nth-child(3n+1) will select the 1st (3*0 +1 = 1) child, 4th (3*1 +1 = 4) child, 7th (3*2 +1 = 7) child, etc.and so on.

What :nth-child(<em>a</em>n+<em>b</em>) does is it divides the container’s children into a elements (the last group taking the remainder), and then selects the bth element of each group. So, li:nth-child(3n+1) will divide the list items into 3 groups, put the remainder items in a fourth group (if the number of items is not divisible by 3), and then it will match the first item in each group.

For example, the following image shows the result of selecting li:nth-child(3n+1) in a list of items. There are 10 items in the list, and we have a = 3, so the 10 items will be divided by 3. 10/3 = 3 + 1, so there will be one item remaining which will be grouped into a last group of its own. Then, for each of the four groups, the first item will be selected. In the following image, the matching items have a khaki background.

When you pass a formula to :nth-child(), the browser will iterate through all children of the container and then select the ones that match the formula. The list of items are treated as items of an array, where each item has an index that may or may not match the result of the formula.

Trivia & Notes

Dealing with the calculations for :nth-child can be confusing and daunting. In addition to that, being able to visualize the results and select items visually is usually a lot easier than having to do the math ourselves. Because of that, some really nice tools have been developed that help you visualize :nth-child. The following are useful tools for that:

• CSS3 structural pseudo-class selector tester by Lea Verou
• NTH-TEST – nth-child and nth-of-type tester by Paul Maloney

Just like other pseudo-class selectors, the :nth-child() selector can be chained with other selectors such as :hover, and pseudo-elements such as ::after, among others. For example, the following rule will provide hover styles for elements matching the formula in :nth-child():

li:nth-child(2n+3)::after {
    /* styles here */
}

tr:nth-child(even):hover {
    background-color: lightblue;
}
                

There is a pseudo-class selector that has a similar functionality to that of :nth-child(), that selector is the :nth-last-child() selector. :nth-last-child() is similar to :nth-child, except that instead of iterating through the elements from the first one downwards, it starts iterating from the last element up.

:nth-child() is also similar to :nth-of-type(), except that the latter is more specific—it selects the elements based on the given formula only if the element is of a certain type. You can learn more about it in the :nth-of-type() entry.