The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
Suppose we have an unordered list and wish to “zebra-stripe” alternating list items:
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
</ul>Rather than adding classes to each list item (eg .even & .odd) we can use :nth-of-type:
li {
background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
background: lightslategrey;
}As you can see, :nth-of-type takes an argument: this can be a single integer, the keywords “even” or “odd”, or a formula as shown above. If an integer is specified only one element is selected—but the keywords or a formula will iterate through all the children of the parent element and select matching elements—similar to navigating items in an array in JavaScript. Keywords “even” and “odd” are straightforward, but the formula is constructed using the syntax an+b, where:
- “a” is an integer value
- “n” is the literal letter “n”
- “+” is an operator and may be either “+” or “-”
- “b” is an integer and is required if an operator is included in the formula
It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The “n” part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every second element with the formula 2n, which worked because every time an element was checked, “n” increased by one (2×0, 2×1, 2×2, 2×3, etc). If an element’s order matches the result of the equation, it gets selected (2, 4, 6, etc). For a more in-depth explanation of the math involved, please read this article.
To illustrate further, here are some examples of valid :nth-of-type selectors:
Luckily, you don’t always have to do the math yourself—there are several :nth-of-type testers and generators out there:
Points of Interest
:nth-of-typeiterates through elements starting from the top of the source order. The only difference between it and:nth-last-of-typeis that the latter iterates through elements starting from the bottom of the source order.- The
:nth-of-typeselector is very similar to:nth-childbut with one critical difference: it is more specific. In our example above they would produce the same result because we are iterating over onlylielements, but if we were iterating over a more complex group of siblings,:nth-childwould try to match all siblings, not only siblings of the same element type. This reveals the power of:nth-of-type—it targets a particular type of element in an arrangement with relation to similar siblings, not all siblings.
Related Properties
Other Resources
Browser Support
:nth-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.
n should start from 1
sorry,i am wrong~~
Splendid, thank you.
Perhaps it should be clarified that this selector only pertains to types/tags (
div,p,span, etc.) not.class?Thanks for this!
niiiiiiiiiiiiiiiiiiiiiiiiiiiiicccccccccccccccccccccceeeeeeeeeeeeeeeeee
This appears to be use a 1 index rather than a 0 index. Playing with this in my own code as well as just modifying the codepen example, 0 is never evaluated. Am i missing something somewhere or has this changed since the original posting?
Alright I found what I was missing. Seems to always happen after I ask somewhere. The n appears to be evaluating at 0 but the div count is a 1 indexed. Have I correctly corrected myself?
You can use nth-child and nth-of-type like this :
`
.post:nth-of-type {}
.post:nth-child {}
`
This may sound silly, but how does nth-of-type deal with gaps in the count? Say my code is
li.count-me:nth-of-type(2n+1){ background-color: #F00; }Surely then my CSS should work as follows:
<li class="count-me">I should be red</li><li class="count-me">I should not be red</li>
<li class="count-me">I should be red</li>
<li class="donot-count-me">I should be ignored</li>
<li class="count-me">I should not be red</li>
<li class="count-me">I should be red</li>
Yet, when I have tried it, the final two
<li>s are the opposite of what they should theoretically be – the one that should not be red is, and the one that should be red is not. Is there a way of having CSS ignore the gaps, or skip over the elements it should not count (in this example, the ones that do not have the class of.count-me)?Thank you!! I was having a hard time to understand this selector, thank you very much!