CSS Reference Pseudo-class

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

nth-child-example
The result of applying :nth-child(3n+1) on a list of items. The items with a blue background color are the ones that are selected by :nth-child(3n+1). Items are divided into 3 groups (black border), and you can see how the first item in each group is matched, including the additional group with the remainder items.

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:

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.

Examples

The following example selects the even rows in a table and applies a background color to them to create a zebra effect.

tr:nth-child(even) {
    background-color: #eee;
}
                

The following are valid :nth-child() declarations:

li:nth-child(-n+1) {}

p:nth-child(odd) {}

tr:nth-child(2n) {} /* 2n is equivalent to "even" */

article:nth-child(2n+1) {} /* 2n+1 is equivalent to "odd" */

li:nth-child(4n+1) {}
                

Live Demo

Change the number of list items and the arguments of :nth-child() in the following demo to see how the matching items change.

View this demo on the Codrops Playground

Browser Support

The :nth-child() selector is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.

Further Reading

Written by . Last updated December 11, 2016 at 9:49 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.