Nth-child vs nth-of-type in CSS: Key Differences and Usage

nth-child selects elements based on their position among all siblings regardless of type, while nth-of-type selects elements based on their position among siblings of the same tag type. Use nth-child when counting all siblings, and nth-of-type when counting only siblings of the same element type.

Quick Comparison

Here is a quick side-by-side comparison of nth-child and nth-of-type selectors in CSS.

Feature	nth-child	nth-of-type
Selection basis	Position among all siblings	Position among siblings of the same tag type
Counts element types	No, counts all elements	Yes, counts only same tag elements
Use case	Select element by overall order	Select element by order within its type
Example: 2nd element	Selects 2nd child regardless of tag	Selects 2nd child of the same tag type
Common mistake	May select unexpected tag if mixed siblings	Ignores other tag types, safer for mixed content

Key Differences

The nth-child selector targets an element based on its position among all sibling elements, regardless of their tag names. For example, li:nth-child(3) selects the third child element inside a parent, even if the third child is not an li but another tag like div or p.

In contrast, nth-of-type counts only siblings of the same tag type. So, li:nth-of-type(3) selects the third li element among its siblings, ignoring other tags. This makes it more precise when you want to style elements by their order within their own type.

Because nth-child counts all siblings, it can select unexpected elements if the parent contains mixed tags. nth-of-type avoids this by filtering siblings by tag type first, then counting. This difference is crucial when working with mixed content inside a container.

Code Comparison

This example shows how nth-child selects the third child regardless of tag type.

html

<style>
  li:nth-child(3) {
    color: red;
    font-weight: bold;
  }
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <div>Not a list item</div>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Output

A list where the third child (a <div> element) is styled red and bold, but no <li> is styled.

nth-of-type Equivalent

This example uses nth-of-type to select the third li element, ignoring other tags.

html

<style>
  li:nth-of-type(3) {
    color: blue;
    font-weight: bold;
  }
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <div>Not a list item</div>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Output

A list where the third <li> (ignoring the <div>) is styled blue and bold.

When to Use Which

Choose nth-child when you want to style elements based on their exact position among all siblings, regardless of type. This is useful when the structure is uniform or when you want to target a specific child number.

Choose nth-of-type when your parent contains mixed element types and you want to style elements based on their order within their own tag type. This selector is safer and more predictable in mixed-content containers.

Key Takeaways

nth-child counts all sibling elements regardless of type.

nth-of-type counts only siblings of the same tag type.

Use nth-child for position-based styling among all siblings.

Use nth-of-type for styling by order within a specific element type.

In mixed content, nth-of-type avoids unexpected selections.