The :nth-of-type pseudo-class in CSS is a powerful selector used to target one or more elements based on their position among sibling elements of the same type. Unlike the :nth-child pseudo-class, which counts all child elements regardless of type, :nth-of-type specifically considers the element’s type, making it highly useful when you need precise styling for elements like multiple li items, p paragraphs, or div blocks within a container. It accepts various formula patterns, including keywords, integers, and mathematical expressions, to select elements at specific intervals or positions.

The syntax of :nth-of-type allows several forms of argument: a single number (e.g., :nth-of-type(3)) selects the third occurrence of an element type, the keyword odd or even selects elements at odd or even positions, and the functional notation An+B (for example, :nth-of-type(2n+1)) allows selection of every second element plus one offset, providing a flexible way to style repeating patterns. This flexibility makes it ideal for tasks such as alternating row colors in tables, creating staggered layouts, or applying animations to every third element in a list.

In practical usage, :nth-of-type can be combined with other selectors to achieve complex styling. For instance, if you have a list of li items inside an unordered list and want to highlight every third item:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

li:nth-of-type(3n) {
  background-color: #f0f0f0;
}

In this example, the third and sixth li elements will have a light gray background. Additionally, :nth-of-type can be used with pseudo-classes like :first-of-type or combined with pseudo-elements such as ::before to create more intricate designs, like custom bullet decorations or numbered sequences. Understanding and leveraging :nth-of-type can significantly enhance your ability to apply precise, pattern-based styles without adding extra classes or modifying HTML structure.