CSS :last-of-type Pseudo-class

The :last-of-type pseudo-class in CSS allows you to select and style the last element of a specific type within its parent. This is particularly useful when you want to apply styles to the last occurrence of an element without adding extra classes or IDs to your HTML markup.

What Is the :last-of-type Pseudo-class?

The :last-of-type pseudo-class represents the last sibling of its type (tag name) within its parent element. It targets the last instance of a specific element type among its siblings, regardless of their classes or IDs.

Syntax

The basic syntax for using :last-of-type is:

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

Example Usage

Consider the following HTML structure:

<div class="article">
    <h2>Article Title</h2>
    <p>Introduction paragraph.</p>
    <p>Main content paragraph.</p>
    <p>Conclusion paragraph.</p>
    <footer>Footer content</footer>
</div>

To style the last <p> element within the .article div, you can use:

.article p:last-of-type {
    font-weight: bold;
    color: blue;
}

This CSS rule applies bold text and changes the color to blue for the last <p> element inside the .article div.

How It Works

The :last-of-type pseudo-class selects the last element of the specified type among its siblings within the same parent. It only considers elements of the same type, ignoring other types of elements that may be present.

Difference Between :last-of-type and :last-child

It's important to distinguish between :last-of-type and :last-child:

• :last-of-type selects the last element of a specific type among its siblings.
• :last-child selects the very last child element of a parent, regardless of its type.

In the example above, <footer> is the last child of .article. Therefore, p:last-child would not select any element, but p:last-of-type selects the last <p> element.

More Examples

Styling the Last List Item

HTML:

<ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

.navigation li:last-of-type a {
    border-right: none;
}

This removes the right border from the last navigation link, which might be used to separate items with borders in a horizontal menu.

Styling the Last Row in a Table

HTML:

<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
    <tr>
        <td>Row 3, Cell 1</td>
        <td>Row 3, Cell 2</td>
    </tr>
</table>

CSS:

tr:last-of-type td {
    background-color: #f0f0f0;
}

This applies a light gray background to all cells in the last row of the table.

Combining with Other Selectors

You can combine :last-of-type with class selectors for more specificity:

.article p.highlight:last-of-type {
    background-color: yellow;
}

This would style the last <p> element with the class highlight inside .article.

Using with Nested Elements

HTML:

<div class="container">
    <div class="item">First Item</div>
    <div class="item">Second Item</div>
    <div class="item">Third Item</div>
</div>

CSS:

.container .item:last-of-type {
    border-bottom: 2px solid #000;
}

This adds a bottom border to the last .item within .container.

Conclusion

The :last-of-type pseudo-class is a powerful tool for targeting the last occurrence of a specific element type within its parent. It helps keep your HTML clean by reducing the need for additional classes or IDs and makes your CSS more efficient and maintainable.