CSS Reference Pseudo-class

:nth-of-type()

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

It is similar to :nth-child, except that it is more specific—only elements of the specified type will be selected.

You can think of it this way: the browser selects all elements of the same type inside a container, and then it treats them as if they were an array of elements, where each element has an index in that array. Then, using the argument passed to :nth-of-type(), it selects all elements of the array whose index matches the value of the argument. For example, p:nth-of-type(...) will filter the paragraphs inside a container, and then select the ones that match the value of :nth-of-type()‘s argument.

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

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

:nth-of-type() 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-of-type(<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-of-type(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-of-type(<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, p:nth-of-type(3n+1) will divide the number of paragraphs into 3 groups, put the remainder in a fourth group (if the number of paragraphs 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 p:nth-of-type(3n+1) in a container containing paragraphs (black background), as well as other type elements (lists with light grey background). There are 11 paragraphs in the container, and we have a = 3, so the 11 items will be divided by 3. 11/3 = 3 + 2, so there will be two items remaining which will be grouped into a last group of their own. Then, for each of the four groups, the first paragraph will be selected. In the following image, the matching paragraphs have a blue background.

nth-of-type-example
The result of applying :nth-of-type(3n+1) to select paragraphs in a container. The paragraphs are grouped into groups of three, not including other elements in between. Then, from each group, the first paragraph is selected and given a blue background color.

Check the live demo out in the Live Demo section below.

Trivia & Notes

Dealing with the calculations for :nth-of-type 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-of-type. The following are useful tools for that:

Just like other pseudo-class selectors, the :nth-of-type() 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-of-type():

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

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

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

Examples

The following example selects the even rows in a table and applies a background color to them to create a zebra effect. This has the same effect as using :nth-child() with the even value.

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

The following are valid :nth-of-type() declarations:

li:nth-of-type(-n+1) {}

p:nth-of-type(odd) {}

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

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

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

Live Demo

The following demo selects paragraphs inside a container using :nth-of-type() and applies a khaki background color to them. Change the number of paragraphs and the arguments of :nth-of-type() in the following demo to see how the matching items change.

View this demo on the Codrops Playground

Browser Support

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

Further Reading

Written by . Last updated July 7, 2015 at 3:04 pm by Sara Soueidan.

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