CSS :nth-of-type() Selector

Posted in CSS Tutorial

Updated on Sep 20, 2024

By Mari Selvan

👁️ 3 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The :nth-of-type() selector in CSS is a powerful pseudo-class that allows you to select elements based on their position among siblings of the same type.

This selector is useful when you need to target elements in a specific order without adding additional classes or IDs. The argument provided inside the nth-of-type() function determines which elements are selected.

💡 Syntax

The signature of the :nth-of-type() Selector is as follows:

Syntax

Copied

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

element: The type of element (e.g., <div>, <p>, <li>) to be selected.
n: A number or a formula (e.g., 2, odd, even, 3n+1) that defines the pattern of element selection.

🧪 Formula Explanation

n: Represents an integer starting from 0.
odd: Targets elements at odd positions (1st, 3rd, 5th...).
even: Targets elements at even positions (2nd, 4th, 6th...).
an+b: A more flexible formula. For example, 3n+1 selects every third element, starting from the first.

📝 Example

Here is an example that demonstrates the usage of the :nth-of-type() selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :nth-of-type() Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <p>First paragraph</p>
        <p>Second paragraph</p>
        <p>Third paragraph</p>
        <p>Fourth paragraph</p>
        <p>Fifth paragraph</p>
    </div>
</body>
</html>

🎨 CSS

CSS

Copied

/* Select every 2nd paragraph (even-numbered) */
p:nth-of-type(even) {
    color: blue;
    font-weight: bold;
}

/* Select the 3rd paragraph */
p:nth-of-type(3) {
    color: green;
    font-size: 18px;
}

In this example:

The p:nth-of-type(even) selector applies styles to the second and fourth paragraphs, making their text blue and bold.
The p:nth-of-type(3) selector applies styles specifically to the third paragraph, making it green and increasing its font size.

💬 Usage Tips

Use for cleaner markup: Instead of adding extra classes for styling specific elements, use :nth-of-type() to minimize the need for additional HTML attributes.
Combine with other pseudo-classes: You can use :nth-of-type() alongside other pseudo-classes like :hover or :last-of-type for more advanced effects.
Apply to any type of element: It works with any element type, such as paragraphs, list items, divs, and more.

⚠️ Common Pitfalls

Siblings of the same type: The :nth-of-type() selector only targets elements of the same type. If your target elements are mixed with other types (e.g., a <div> between <p> elements), the counting will only apply to the elements of the specified type.
Zero-based counting: Be mindful of the fact that formulas using n (like 3n+1) start counting from the first element (n=0). Always test your formula to ensure it selects the right elements.

🎉 Conclusion

The CSS :nth-of-type() selector provides a flexible and efficient way to target elements based on their position in a group of siblings.

Whether you're selecting specific items in a list or styling alternate rows in a table, this pseudo-class allows you to achieve precise, dynamic styling without cluttering your HTML with extra classes or IDs.