What is "CSS nth-of-type"?

The CSS :nth-of-type() pseudo-class is a powerful selector that allows you to target elements based on their position within a group of siblings of the same type. Unlike :nth-child(), which considers all sibling elements, :nth-of-type() only counts elements of the same tag name.

Here's a breakdown of how it works:

Syntax:

The basic syntax is element:nth-of-type(an+b), where:

- element: The HTML element you want to target (e.g., p, li, div).

- an+b: An expression that determines which elements to select. a represents a cycle size, n is a counter (starting from 0), and b is an offset.

Common Use Cases:

- :nth-of-type(2): Selects the second element of the specified type.

- :nth-of-type(odd): Selects every odd-numbered element of the specified type.

- :nth-of-type(even): Selects every even-numbered element of the specified type.

- :nth-of-type(3n): Selects every third element of the specified type.

- :nth-of-type(3n+1): Selects every third element of the specified type, starting with the first.

Key Differences from :nth-child():

The main difference lies in how they count elements. :nth-child() counts all sibling elements, regardless of their type, while :nth-of-type() only counts elements of the same type. This makes :nth-of-type() particularly useful when you have a mix of different element types within the same parent.

Example:

Consider the following HTML:

<div>
  <p>First paragraph</p>
  <span>First span</span>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
  <span>Second span</span>
</div>

If you use p:nth-of-type(2), it will select the "Second paragraph" because it's the second <p> element within its parent. However, p:nth-child(2) would not select any paragraph because the second child is a <span> element.

When to Use :nth-of-type():

- When you need to style specific elements of the same type within a container, regardless of other element types.

- When you want to create alternating styles for lists or tables where different element types might be present.

In summary, :nth-of-type() is a versatile CSS selector that provides precise control over styling elements based on their type and position within a group of siblings, making it an essential tool for web developers.

Learn more about this