CSS :nth-of-type() Selector

What You’ll Learn

The :nth-of-type() pseudo-class targets elements by their position among siblings of the same tag type. It is the type-aware counterpart to :nth-child().

Introduction

The :nth-of-type() selector in CSS lets you target elements based on their position among siblings of the same element type. This pseudo-class is extremely flexible, letting you style elements by patterns or specific positions without adding extra classes.

Whether you are working with paragraphs in an article, list items in a menu, or rows in a table, :nth-of-type() is a powerful tool when mixed HTML tags would break a plain :nth-child() count.

Definition and Usage

Write element:nth-of-type(n) where n is a number, the keyword odd or even, or a formula like 2n+1 or 3n+1.

📝 Syntax

The syntax for the :nth-of-type() pseudo-class is:

element:nth-of-type(n) {
  /* CSS properties */
}

element is the tag type you want to match. n can be a number, keyword, or an+b formula.

Common Patterns

The an+b Formula (By Type)

• n is a counter starting at 0, increasing by 1 for each sibling of the same type.
• a is the step size — how often to select (e.g. every 2nd, every 3rd of that type).
• b is the offset — the starting position in the sequence among that type.

Related Selectors

• :nth-child() — counts all sibling children regardless of tag type
• :nth-last-of-type() — counts from the end among siblings of the same type
• :first-of-type / :last-of-type — shorthand for first and last of a type
• :not() — combine for exclusions like p:not(:nth-of-type(1))

When to Use :nth-of-type()

:nth-of-type() is ideal when tag type and position both matter:

• Mixed sibling groups — Style every other <p> when headings or divs sit between paragraphs.
• Highlight a position — Emphasize the third list item with li:nth-of-type(3).
• Repeating patterns — Every third heading with h2:nth-of-type(3n+1).
• Article sections — p:nth-of-type(1) for lead paragraph styling.
• When nth-child fails — Switch to :nth-of-type() if other tag types shift the count.

Examples Gallery

Practice :nth-of-type() with even rows, specific positions, formulas, and mixed sibling layouts.

p:nth-of-type(even) {
  color: #1d4ed8;
  font-weight: 700;
}

p:nth-of-type(3) {
  color: #15803d;
  font-size: 1.05rem;
}

li:nth-of-type(odd) {
  background: #f1f5f9;
}

/* Equivalent to :nth-of-type(2n+1) */

p:nth-of-type(3n+1) {
  background: #dcfce7;
  border-left: 4px solid #16a34a;
  padding-left: 0.65rem;
}

<style>
  p:nth-of-type(2) {
    background: #fef3c7;
    border-left: 4px solid #d97706;
    padding-left: 0.65rem;
  }
</style>

<article>
  <p>Opening paragraph.</p>
  <div class="callout">Important callout</div>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
</article>

💬 Usage Tips

• Use odd/even for striping — More readable than 2n+1 for simple zebra patterns by type.
• Include the element type — Always write p:nth-of-type(), not bare :nth-of-type().
• Test formulas — Plug n=0,1,2 into an+b to verify which positions match among that type.
• Mixed layouts — Prefer :nth-of-type() over :nth-child() when other tags appear between targets.
• Combine with parents — article > p:nth-of-type(1) scopes to direct paragraph children.

⚠️ Common Pitfalls

• Only counts same tag type — p:nth-of-type(2) ignores <div> siblings but only matches <p> elements.
• Confusing with nth-child — A div between paragraphs breaks :nth-child() but not :nth-of-type().
• 1-based, not 0-based — The first of a type is :nth-of-type(1), not 0.
• Tag must match — div:nth-of-type(1) will not match a <p> element.
• Overlapping rules — Multiple :nth-of-type() rules can apply to the same element; watch specificity.

♿ Accessibility

• Contrast on stripes — Alternating row colors must still meet WCAG contrast requirements.
• Do not rely on color alone — Pair zebra stripes with clear borders or labels where needed.
• Semantic markup — Use proper <p>, <ul>, and heading tags for screen readers.
• Reading order unchanged — Positional styling does not affect document order for assistive technology.

💡 Best Practices