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

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:

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