CSS :nth-of-type() Pseudo-Class

CSS :nth-of-type() Pseudo-Class

The CSS :nth-of-type() pseudo-class selects elements according to their position among siblings of the same element type, counting from the beginning. It supports fixed positions, odd and even patterns, and mathematical formulas for selecting repeating or limited groups of elements.

:nth-of-type() Syntax

selector:nth-of-type(An+B) {
  property: value;
}

The :nth-of-type() pseudo-class accepts an integer, the keywords odd or even, or an An+B expression. It counts siblings of the same element type from the beginning.

Fixed Position

p:nth-of-type(2) {
  color: #006699;
}

Selects the second paragraph among paragraph siblings.

Odd and Even

p:nth-of-type(odd) {
  background-color: #eaf6fc;
}
p:nth-of-type(even) {
  background-color: #f5f5f5;
}

Selects alternating paragraphs according to their position among paragraph siblings.

Formula

p:nth-of-type(3n+1) {
  font-weight: bold;
}

Selects paragraph positions 1, 4, 7, 10, and so on.

No of Selector Argument

Unlike :nth-child(), :nth-of-type() does not accept an optional of selector list. It always counts siblings of the same element type.

How :nth-of-type() Works

The browser counts sibling elements of the same type, starting with the first sibling of that type and moving forward.

HTML Example

<div>
  <p>First paragraph</p>
  <h3>Section Heading</h3>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

CSS Example

p:nth-of-type(2) {
  color: #006699;
}

The second paragraph matches because it is the second paragraph among its siblings. The heading does not affect the paragraph count.

Counting Starts at One

The first sibling of a particular element type has position 1, the second has position 2, and so on.

Different Element Types Are Ignored

Other element types do not affect the position count. For example, headings and images are not counted when selecting paragraphs.

Each Parent Is Independent

Counting restarts within each parent element. Paragraphs in separate containers are counted independently.

Document Order

Positions are based on the document tree, not on visual ordering created with CSS Flexbox or Grid.

Selecting Fixed Positions

Use a positive integer inside :nth-of-type() to select an element at a specific position among siblings of the same type.

First Paragraph

p:nth-of-type(1) {
  font-weight: bold;
}

Matches the first paragraph among paragraph siblings. This is equivalent to p:first-of-type.

Second Paragraph

p:nth-of-type(2) {
  color: #006699;
}

Matches the second paragraph among paragraph siblings.

Third List Item

li:nth-of-type(3) {
  border-bottom: 2px solid #006699;
}

Matches the third list item among its list item siblings.

Position Zero

p:nth-of-type(0) {
  color: #006699;
}

This selector matches no elements because sibling positions begin at 1.

Odd and Even Positions

The odd and even keywords select alternating positions among siblings of the same element type.

Odd Positions

p:nth-of-type(odd) {
  background-color: #eaf6fc;
}

Matches the first, third, fifth, and subsequent odd-numbered paragraphs.

Even Positions

p:nth-of-type(even) {
  background-color: #f5f5f5;
}

Matches the second, fourth, sixth, and subsequent even-numbered paragraphs.

Position Comparison

Equivalent Formulas

p:nth-of-type(2n+1) {
  background-color: #eaf6fc;
}
p:nth-of-type(2n) {
  background-color: #f5f5f5;
}

2n+1 is equivalent to odd, while 2n is equivalent to even.

The An+B Formula

The An+B formula defines a sequence of positions among siblings of the same element type.

Formula Components

In An+B, A controls the interval, n is a nonnegative integer starting at zero, and B provides an offset. Only positive calculated positions can match.

Every Third Paragraph

p:nth-of-type(3n) {
  color: #006699;
}

Matches paragraph positions 3, 6, 9, 12, and so on.

Every Third Paragraph Starting at One

p:nth-of-type(3n+1) {
  font-weight: bold;
}

Matches paragraph positions 1, 4, 7, 10, and so on.

Every Fourth Paragraph Starting at Two

p:nth-of-type(4n+2) {
  background-color: #eaf6fc;
}

Matches paragraph positions 2, 6, 10, 14, and so on.

Common Formulas

Nonnegative Values of n

The formula uses n = 0, 1, 2, 3, and so on. Zero or negative results cannot match element positions.

Negative Formulas

Negative coefficients allow :nth-of-type() to select a limited range of siblings of the same element type.

First Three Paragraphs

p:nth-of-type(-n+3) {
  color: #006699;
}

Matches the first three paragraphs among their paragraph siblings.

First Five Paragraphs

p:nth-of-type(-n+5) {
  background-color: #eaf6fc;
}

Matches the first five paragraphs, or all paragraphs if fewer than five exist.

Positions Three Through Six

p:nth-of-type(n+3):nth-of-type(-n+6) {
  font-weight: bold;
}

Combines two formulas to select paragraphs at positions 3, 4, 5, and 6.

Paragraphs After the Third

p:nth-of-type(n+4) {
  color: #006699;
}

Matches the fourth paragraph and every paragraph after it.

Why Negative Formulas Work

With a negative coefficient, calculated positions decrease as n increases. Once the result becomes zero or negative, it cannot match.

Mixed Element Types

The :nth-of-type() pseudo-class counts only siblings of the same element type, even when other element types appear between them.

HTML Example

<div>
  <p>First paragraph</p>
  <h3>Heading</h3>
  <p>Second paragraph</p>
  <div>Additional content</div>
  <p>Third paragraph</p>
</div>

CSS Example

p:nth-of-type(2) {
  color: #006699;
}

The second paragraph matches because it is the second paragraph among its siblings. The heading and nested div do not affect the count.

Compare with :nth-child()

p:nth-child(2) {
  color: #006699;
}

In this example, the second child overall is the heading, so no paragraph matches p:nth-child(2).

Selecting the First Paragraph

p:nth-of-type(1) {
  font-weight: bold;
}

This rule selects the first paragraph even when another element type appears before it.

Classes and Element Types

The :nth-of-type() pseudo-class counts siblings by HTML element type, not by class name.

HTML Example

<div>
  <p class="featured">Featured One</p>
  <p>Regular Paragraph</p>
  <p class="featured">Featured Two</p>
  <p class="featured">Featured Three</p>
</div>

CSS Example

p.featured:nth-of-type(2) {
  color: #006699;
}

This rule matches no elements because the second paragraph does not have the featured class. The class selector does not change the paragraph count.

Selecting the Third Paragraph

p.featured:nth-of-type(3) {
  color: #006699;
}

This rule selects Featured Two because it is the third paragraph overall and has the featured class.

Counting Only Featured Elements

p:nth-child(2 of .featured) {
  color: #006699;
}

This rule selects Featured Two because it is the second sibling with the featured class.

Choosing the Right Selector

Use :nth-of-type() to count siblings of the same HTML element type. Use :nth-child(... of selector) to count siblings matching a class or another selector.

Related Pseudo-Classes

Several structural pseudo-classes select elements based on sibling position, element type, or counting direction.

Comparison

CSS Example

p:nth-of-type(2) {
  color: #006699;
}
p:nth-last-of-type(2) {
  font-weight: bold;
}
p:first-of-type {
  border-top: 2px solid #006699;
}

These rules select the second paragraph from the beginning, the second-to-last paragraph, and the first paragraph among paragraph siblings.

Choosing the Right Selector

Use :nth-of-type() when counting from the beginning among siblings of the same element type. Use :nth-child() when overall sibling position matters.

:nth-of-type() Specificity

The :nth-of-type() pseudo-class contributes a specificity of 0-1-0, like other structural pseudo-classes.

Specificity Examples

Specificity Example

p {
  color: #333;
}
p:nth-of-type(2) {
  color: #006699;
}

When both rules match and other cascade factors are equal, the :nth-of-type() rule takes precedence because it has greater specificity.

Class Selectors

p.featured:nth-of-type(2) {
  font-weight: bold;
}

Adding a class selector increases specificity but does not change which siblings are counted.

Practical Uses

The :nth-of-type() pseudo-class is useful for styling elements based on their position among siblings of the same type.

First Three Paragraphs

article p:nth-of-type(-n+3) {
  background-color: #eaf6fc;
}

Highlights the first three paragraphs among their paragraph siblings.

Second Heading of the Same Level

h3:nth-of-type(2) {
  color: #006699;
}

Styles the second third-level heading within each parent.

Alternating Table Rows

tbody tr:nth-of-type(even) {
  background-color: #f5f5f5;
}

Applies alternating row colors to table rows.

Paragraphs After the Second

p:nth-of-type(n+3) {
  margin-top: 16px;
}

Applies spacing to paragraphs at positions 3 and later.

Repeating Card Patterns

.card:nth-of-type(3n) {
  border-color: #006699;
}

Styles every third sibling of the same element type when that sibling also has the card class.

Limitations

The :nth-of-type() pseudo-class depends on element types and their positions in the document tree.

Counts by Element Type

The selector counts siblings of the same HTML element type. It does not count only elements with a particular class.

No of Selector Syntax

The pseudo-class does not support the optional of selector list available in :nth-child().

Not Based on Visual Order

Flexbox and Grid can change visual placement without changing the document order used for counting.

DOM Changes Affect Matching

Adding, removing, or reordering siblings of the same type can change which elements match.

Hidden Elements Are Counted

Elements hidden with display: none still participate in type-based counting.

Each Parent Is Independent

Counting restarts within each parent and does not continue across separate containers.

Different Heading Levels Are Different Types

Elements such as <h2> and <h3> are different element types and are counted separately.

Best Practices

• Use :nth-of-type() when counting siblings of the same element type from the beginning.
• Use positive integers for fixed positions, such as the second paragraph.
• Use odd and even for alternating patterns.
• Use An+B formulas for repeating intervals and position ranges.
• Use negative formulas to select a limited number of initial siblings of the same type.
• Remember that counting begins at 1 with the first sibling of the same type.
• Do not assume a class selector changes which siblings are counted.
• Use :nth-child(... of selector) when filtering by classes or other selectors.
• Remember that hidden elements and DOM changes can affect matching.
• Keep selectors readable and test them with mixed element types.

:nth-of-type() Example

This example selects paragraphs according to their position among paragraph siblings. The first three paragraphs receive a light blue background, and the second paragraph receives a blue left border and bold text. A heading between paragraphs does not affect the count.

HTML

<div class="nth-of-type-demo">
  <p>Paragraph One</p>
  <h3>Section Heading</h3>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
  <p>Paragraph Four</p>
  <p>Paragraph Five</p>
</div>

CSS

.nth-of-type-demo p {
  padding: 10px 12px;
  margin-bottom: 5px;
  border-left: 4px solid transparent;
  background-color: #f5f5f5;
}
.nth-of-type-demo p:nth-of-type(-n+3) {
  background-color: #eaf6fc;
}
.nth-of-type-demo p:nth-of-type(2) {
  border-left-color: #006699;
  font-weight: bold;
}
.nth-of-type-demo h3 {
  margin: 12px 0;
  font-size: 1rem;
}

Browser Result

Play in Editor

Note: Paragraphs One, Two, and Three receive the light blue background. Paragraph Two also receives a blue left border and bold text. The heading does not affect paragraph counting.

Browser Support

Baseline: Widely available. The :nth-of-type() pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. Integer positions, odd, even, and An+B formulas are widely supported.

For current compatibility information, visit Can I Use? .

Specifications

The :nth-of-type() pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It selects elements according to their position among siblings of the same element type, counting from the beginning.

Selectors Level 4 - :nth-of-type()