CSS :last-of-type Selector

Posted in CSS Tutorial

Updated on Oct 27, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :last-of-type selector in CSS is a structural pseudo-class that selects the last element of a specific type within its parent.

This selector is particularly useful when you need to target and style the last occurrence of a particular element without adding extra classes or IDs.

💡 Syntax

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

Syntax

Copied

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

element can be any valid HTML element, such as <div>, <p>, <li>, etc.
The :last-of-type selector applies styles to the last element of that type among its siblings.

📝 Example

Here is an example of how to use the :last-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 :last-of-type Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section>
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <p>This is the last paragraph.</p>
    </section>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3 (last)</li>
    </ul>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for the last paragraph within its parent */
p:last-of-type {
    color: red;
    font-weight: bold;
}

/* Style for the last list item within its parent */
li:last-of-type {
    background-color: yellow;
    font-style: italic;
}

In this example:

The last <p> element within the <section> is styled with red text and bold font.
The last <li> in the <ul> is highlighted with a yellow background and italic text.

💬 Usage Tips

The :last-of-type selector is highly useful when you want to apply styles specifically to the last occurrence of a particular type of element in a container, avoiding the need for extra markup.
It works with any element type, whether it’s a paragraph, a list item, or a heading.
Combine :last-of-type with other selectors for more complex styling. For example, div p:last-of-type targets the last paragraph inside each <div>.

⚠️ Common Pitfalls

Be aware that :last-of-type does not simply select the last child of a parent but specifically the last child of a particular element type. For example, in a group of mixed elements, it will only select the last occurrence of the specified type.
It is important to differentiate between :last-of-type and :last-child. While :last-child selects the very last child of its parent, :last-of-type selects the last occurrence of a given element type.

🎉 Conclusion

The CSS :last-of-type selector allows for clean, dynamic styling by targeting the last instance of a particular type of element within its parent. It simplifies design patterns where you need to apply unique styles to specific elements without modifying your HTML structure.

This selector can be an essential tool for creating clean and efficient stylesheets.