CSS :nth-of-type() Selector Guide

What Is :nth-of-type()?

The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name). "Type" refers to the element's tag name such as p, div, li, or any other HTML element. This selector is part of the CSS Selectors Level 4 specification and provides precise control over element selection without affecting other element types in the same container.

According to the MDN Web Docs, this selector is essential for scenarios where you need to style specific elements while ignoring others of different types that share the same parent.

How Position Counting Works

Position counting in :nth-of-type() starts at 1, not 0. The selector only counts elements of the matching type and completely ignores other sibling elements of different types. For example, in a container with mixed div, p, and span elements, using p:nth-of-type(2) will select the second paragraph regardless of how many divs or spans exist in the same parent.

This behavior differs from :nth-child(), which counts every single sibling element. When working with responsive design layouts that often contain mixed content types, :nth-of-type() provides more predictable results.

Syntax and Parameters

The :nth-of-type() selector follows the syntax :nth-of-type(<An+B> | even | odd). The selector attaches to an element type selector, so you write it as element:nth-of-type(...). The parameter inside the parentheses determines which elements get matched based on position, formula, or keywords.

As documented by MDN Web Docs, the selector accepts three main parameter types: simple numbers for single-element selection, keywords (even/odd) for alternating patterns, and the An+B formula for complex matching rules.

The An+B Formula

The An+B formula provides powerful pattern matching capabilities. Here, A represents the step size (how many elements to skip), B is the offset (starting position), and n starts at 0 and increments. According to Kirupa's comprehensive guide, this formula allows for incredibly flexible element selection.

The formula 2n+1 produces the same result as the odd keyword, matching positions 1, 3, 5, and so on. Similarly, 2n matches all even positions like even. For every third element, use 3n, which matches positions 3, 6, 9, etc. To select just the first three elements regardless of container size, use -n+3. And to select from the fourth element onward, use n+4.

This formula becomes especially useful when building grid column layouts where you need to target specific items in repeating patterns.

:nth-of-type() vs :nth-child()

The key difference between these selectors lies in how they count elements. The :nth-of-type() selector only counts elements of the same type, while :nth-child() counts ALL sibling elements regardless of type. As explained in the Kirupa tutorial, this distinction becomes critical when working with mixed element containers.

Consider a container with alternating div and p elements. Using p:nth-of-type(1) selects the first paragraph, but p:nth-child(1) would select nothing because the first child is a div. When all siblings are of the same type, both selectors behave identically. For common web layouts with diverse element structures, :nth-of-type() offers more predictable and reliable selection.

Practical Examples

The :nth-of-type() selector excels in common web development scenarios. Zebra-striped tables use tr:nth-of-type(even) to alternate row colors, improving readability without JavaScript. Navigation menus often highlight the first item or create visual spacing patterns. Article layouts frequently style the first paragraph with a drop cap or larger font using p:nth-of-type(1).

Combining :nth-of-type() with related selectors like :last-child allows for sophisticated styling patterns that adapt to dynamic content.

Browser Support

The :nth-of-type() selector has excellent browser support across all modern browsers. As documented by MDN Web Docs, this selector has been widely available since July 2015 and is supported in Chrome, Firefox, Safari, and Edge. It is part of the CSS Selectors Level 4 specification, meaning no polyfills are needed for current browsers. This universal support makes it a reliable choice for production websites targeting diverse audiences.

For teams practicing web performance optimization, using native CSS selectors like :nth-of-type() is more efficient than JavaScript-based alternatives, as the browser can apply these styles during rendering without additional runtime overhead.

Best Practices

When deciding between :nth-of-type() and :nth-child(), consider your element structure. Use :nth-of-type() when working with mixed element containers where predictability matters. When all siblings are the same type, :nth-child() may be slightly faster, though the performance difference is negligible in most cases.

Always test your patterns with different element counts to ensure they behave as expected. Comment complex An+B formulas for future maintainability--your future self will thank you. Consider using CSS custom properties for repeated patterns, making global adjustments easier. When building masonry layouts or complex grid systems, :nth-of-type() helps create consistent visual rhythms without additional markup.

For interactive elements, combine :nth-of-type() with the :focus pseudo-class to create accessible navigation patterns.

Related Selectors

Several pseudo-classes complement :nth-of-type() for comprehensive element selection. The :nth-child() selector counts all siblings regardless of type, useful when elements are uniform. For counting from the end, :nth-last-of-type() provides symmetrical functionality. Shorthands like :first-of-type (equivalent to :nth-of-type(1)) and :last-of-type() offer convenient single-property access. Understanding these related selectors helps you choose the right tool for each selection scenario in your CSS styling projects.

Sources

1. MDN Web Docs - :nth-of-type() - Official documentation with syntax, browser compatibility, and specification references
2. Kirupa - All About nth-of-type and nth-child - Comprehensive tutorial with visual examples and detailed comparison