CSS Selectors: :last-of-type Selector

Imagine you’re preparing a fancy dinner and you want the last dessert on each tray to have an extra garnish, making it stand out. In web design, the :last-of-type selector in CSS works similarly. It allows you to style the last occurrence of a specific element type within its parent, helping you highlight or differentiate the last item in a group.

Table of Contents

What is the :last-of-type Selector?

The :last-of-type selector is a CSS pseudo-class that targets the last element of its type within its parent. This can be particularly useful for styling the last instance of a specific element, such as the last paragraph, the last heading, or the last image within a section or container.

Here’s how it looks:

element:last-of-type {
  property: value;
}

Why Use the :last-of-type Selector?

Precise Targeting: The :last-of-type selector allows you to apply styles specifically to the last occurrence of an element type within its parent, providing precise control over your designs.

Dynamic Styling: It enables you to create dynamic and flexible styles that respond to the structure of your content, enhancing the visual appeal.

Simplified Code: Using the :last-of-type selector can reduce the need for additional classes or IDs, keeping your HTML and CSS clean and maintainable.

Practical Examples

Let’s explore some practical examples to see how the :last-of-type selector can be used effectively.

Example 1: Styling the Last Paragraph of Each Section

You can style the last paragraph in each section to make it stand out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Last Paragraph</title>
	
    <style>
	
        p:last-of-type {
            font-weight: bold;
            color: red;
        }
		
    </style>
</head>
<body>

    <section>
        <p>This is the first paragraph in the first section.</p>
        <p>This is the last paragraph in the first section.</p>
    </section>
	
    <section>
        <p>This is the first paragraph in the second section.</p>
        <p>This is the last paragraph in the second section.</p>
    </section>
	
</body>
</html>

In this example, the p:last-of-type selector applies bold text and red color to the last paragraph within each section, making it stand out.

Example 2: Highlighting the Last List Item of Each Type

You can style the last list item of each type in a mixed list to give it special attention.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Last List Item</title>
	
    <style>
	
        ul li:last-of-type {
            background-color: lightblue;
        }

        ol li:last-of-type {
            background-color: lightgreen;
        }
		
    </style>
</head>
<body>

    <ul>
        <li>First item in unordered list</li>
        <li>Second item in unordered list</li>
        <li>Last item in unordered list</li>
    </ul>
	
    <ol>
        <li>First item in ordered list</li>
        <li>Second item in ordered list</li>
        <li>Last item in ordered list</li>
    </ol>
	
</body>
</html>

Here, the ul li:last-of-type selector applies a light blue background to the last item in each unordered list, while the ol li:last-of-type selector applies a light green background to the last item in each ordered list, highlighting their positions.

Example 3: Styling the Last Image in Each Container

You can style the last image in each container to give it a special border.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Last Image</title>
	
    <style>
	
        .gallery img:last-of-type {
            border: 5px solid purple;
        }
		
    </style>
</head>
<body>

    <div class="gallery">
        <img src="image1.jpg" alt="First Image in Gallery">
        <img src="image2.jpg" alt="Second Image in Gallery">
        <img src="image3.jpg" alt="Last Image in Gallery">
    </div>
	
    <div class="gallery">
        <img src="image4.jpg" alt="First Image in Another Gallery">
        <img src="image5.jpg" alt="Second Image in Another Gallery">
        <img src="image6.jpg" alt="Last Image in Another Gallery">
    </div>
	
</body>
</html>

In this example, the .gallery img:last-of-type selector applies a purple border to the last image within each gallery container, making it visually distinct.

Example 4: Styling the Last Heading in Each Article

You can style the last heading in each article to give it a unique style.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Last Heading</title>
	
    <style>
	
        article h2:last-of-type {
            text-decoration: underline;
            color: orange;
        }
		
    </style>
</head>
<body>

    <article>
        <h2>First heading in the first article</h2>
        <p>Content of the first article.</p>
        <h2>Last heading in the first article</h2>
    </article>
	
    <article>
        <h2>First heading in the second article</h2>
        <p>Content of the second article.</p>
        <h2>Last heading in the second article</h2>
    </article>
	
</body>
</html>

Here, the article h2:last-of-type selector applies an underline and orange color to the last h2 heading within each article, highlighting its position.

Example 5: Combining :last-of-type with Other Selectors

You can combine :last-of-type with other selectors for more complex styles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combined Selectors</title>
	
    <style>
	
        .container p:last-of-type {
            font-style: italic;
            color: navy;
        }
		
    </style>
</head>
<body>

    <div class="container">
        <p>This is the first paragraph in the first container.</p>
        <p>This is the last paragraph in the first container.</p>
    </div>
	
    <div class="container">
        <p>This is the first paragraph in the second container.</p>
        <p>This is the last paragraph in the second container.</p>
    </div>
	
</body>
</html>

In this example, the .container p:last-of-type selector styles the last paragraph in each container with italic text and navy color, making it stand out.

Conclusion

The :last-of-type selector is a versatile and powerful tool in CSS, allowing you to apply styles specifically to the last occurrence of an element type within its parent. Whether you’re highlighting the last paragraph, the last list item, the last image, or the last heading, the :last-of-type selector helps you create dynamic, organized, and visually appealing designs. So, the next time you want to style the last instance of an element type, remember the :last-of-type selector — your key to precise and effective styling.