CSS :nth-of-type() Pseudo-Class: Complete Guide to Selecting Elements by Type

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

Understanding the Basic Syntax

The :nth-of-type() pseudo-class accepts various parameters that determine which elements to select:

element:nth-of-type(an+b)
element:nth-of-type(odd)
element:nth-of-type(even)
element:nth-of-type(n)

Where:

• a and b are integers
• n represents a counter starting from 0
• odd selects elements at odd positions (1st, 3rd, 5th, etc.)
• even selects elements at even positions (2nd, 4th, 6th, etc.)

Basic Examples with Visual Demonstrations

Selecting Specific Positions

p:nth-of-type(1) {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 10px;
    border-left: 4px solid #2196f3;
}

Selecting Odd and Even Elements

li:nth-of-type(odd) {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

li:nth-of-type(even) {
    background-color: #e8f5e8;
    color: #388e3c;
}

Advanced Formula-Based Selection

The real power of :nth-of-type() comes from using algebraic formulas to create complex selection patterns.

Understanding the Formula: an+b

The formula an+b works as follows:

• a: The coefficient that determines the interval
• n: Starts at 0 and increments by 1 (0, 1, 2, 3, …)
• b: The offset that shifts the starting position

/* Selects 2nd, 5th, 8th, 11th elements */
div:nth-of-type(3n+2) {
    background-color: #ff9800;
    color: white;
    font-weight: bold;
}

Practical Use Cases

Creating Responsive Grid Layouts

.card:nth-of-type(3n+1) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card:nth-of-type(3n+2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.card:nth-of-type(3n+3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

Styling Table Rows

tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}
tr:nth-of-type(even) {
    background-color: #ffffff;
}
/* Highlight every 5th row */
tr:nth-of-type(5n) {
    background-color: #fff3e0;
    border-left: 4px solid #ff9800;
    font-weight: bold;
}

Interactive Example: Formula Tester

Common Formulas and Their Patterns

Difference Between :nth-child() and :nth-of-type()

Understanding the distinction between these two pseudo-classes is crucial for proper implementation:

/* nth-child counts ALL children */
p:nth-child(2) {
    background-color: #ffeb3b; /* Selects first paragraph */
}

/* nth-of-type counts only paragraphs */
p:nth-of-type(2) {
    background-color: #4caf50; /* Selects second paragraph */
}

Browser Support and Performance

The :nth-of-type() pseudo-class enjoys excellent browser support across all modern browsers:

• Chrome: Full support since version 1
• Firefox: Full support since version 3.5
• Safari: Full support since version 3.1
• Edge: Full support since version 12
• Internet Explorer: Supported from IE9+

Performance Considerations

While :nth-of-type() is well-optimized in modern browsers, consider these performance tips:

• Avoid overly complex formulas in performance-critical applications
• Use specific element selectors (e.g., div:nth-of-type()) rather than universal selectors
• Consider using CSS Grid or Flexbox for complex layout patterns when possible
• Cache-bust selectors by combining with class names for better specificity

Advanced Techniques and Best Practices

Combining with Other Pseudo-Classes

article:nth-of-type(odd):hover {
    background-color: #e1f5fe;
    transform: translateX(10px);
}

article:nth-of-type(even):hover {
    background-color: #fce4ec;
    transform: translateX(-10px);
}

article:first-of-type {
    border-top: 4px solid #2196f3;
}

article:last-of-type {
    border-bottom: 4px solid #f44336;
}

Responsive Design Applications

Use :nth-of-type() with media queries to create responsive layouts that adapt to different screen sizes:

/* Mobile: Single column */
@media (max-width: 768px) {
    .card:nth-of-type(n) {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Tablet: Two columns */
@media (min-width: 769px) and (max-width: 1024px) {
    .card:nth-of-type(odd) {
        margin-right: 2%;
    }
    .card:nth-of-type(2n) {
        clear: right;
    }
}

/* Desktop: Three columns */
@media (min-width: 1025px) {
    .card:nth-of-type(3n+1) {
        clear: left;
    }
}

Common Pitfalls and Solutions

Pitfall 1: Mixed Element Types

Remember that :nth-of-type() only counts elements of the same type. If you have mixed elements, it might not behave as expected:

/* This might not work as expected with mixed elements */
<div>
    <h2>Heading</h2>
    <p>Paragraph 1</p>  <!-- This is p:nth-of-type(1) -->
    <div>Some content</div>
    <p>Paragraph 2</p>  <!-- This is p:nth-of-type(2) -->
</div>

Pitfall 2: Dynamic Content

When content is added or removed dynamically, :nth-of-type