CSS :first-of-type Selector

Posted in CSS Tutorial

Updated on Oct 16, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :first-of-type selector in CSS is a structural pseudo-class used to target the first element of its type within its parent.

It allows you to apply styles to the first occurrence of a specified type of element, making it useful when designing consistent layouts or emphasizing specific elements.

💡 Syntax

The signature of the :first-of-type Selector is as follows:

Syntax

Copied

element:first-of-type {
    /* CSS properties */
}

element: This represents any valid HTML element you want to target (e.g., p, div, li).
The :first-of-type pseudo-class applies styles to the first instance of the specified element type within its parent.

📝 Example

Let’s look at a practical example of how the :first-of-type selector works.

☠️ 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 :first-of-type Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Article Section</h2>
        <p>This is the first paragraph in the section.</p>
        <p>This is the second paragraph in the section.</p>
        <p>This is the third paragraph in the section.</p>
    </div>
</body>
</html>

🎨 CSS

CSS

Copied

/* Apply a unique style to the first paragraph within its parent */
p:first-of-type {
    font-weight: bold;
    color: blue;
}

In this example, the :first-of-type selector is used to make the first <p> element inside its parent <div> bold and blue, while the other paragraphs remain unaffected.

💬 Usage Tips

The :first-of-type selector is element-specific. For instance, p:first-of-type will only target the first <p> element, not the first element of any other type.
Use :first-of-type when you want to apply styles to the first instance of a particular type of element within its parent, regardless of other element types.

📝 Example: Multiple Elements

Here’s an example with multiple types of elements:

☠️ HTML

HTML

Copied

<div class="list-section">
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <ul>
        <li>Another first item</li>
        <li>Another second item</li>
        <li>Another third item</li>
    </ul>
</div>

🎨 CSS

CSS

Copied

/* Style the first list item in each  */
ul li:first-of-type {
    color: red;
}

This CSS will style the first <li> element of each <ul> in red.

⚠️ Common Pitfalls

The :first-of-type selector is based on the element's type, not the order of appearance. If the first child in a parent is of a different type, it will not be selected.
Be careful when using :first-of-type with nested elements. If you are targeting a deeply nested structure, it might not behave as expected due to how CSS matches elements.

🎉 Conclusion

The :first-of-type selector is a versatile pseudo-class in CSS, allowing developers to target the first occurrence of a specific element type within its parent. Whether you’re designing a dynamic layout or emphasizing specific sections, this selector can simplify your CSS and make styling more efficient. By understanding its nuances, you can use it effectively to create more polished and consistent designs.