CSS Reference Pseudo-class

:last-of-type

:last-of-type is a pseudo-class selector that selects an element that is the last element (sibling) of its type in the list of children of its parent.

In other words, :last-of-type matches the last occurrence of an element inside its parent. For example, the following rule will select and style the last paragraph in .container.

<article>
    <h1>Article Title</h1>
    <p>
        First paragraph.
    </p>
    <p>
        Second paragraph.
    </p>
    <footer> <-- .. --></footer>
</article>
                
p:last-of-type {
    font-style: italic;
}
                

Trivia & Notes

:last-of-type is similar to the :last-child selector, except that it is more specific than the latter—:last-of-type will select the last paragraph in the above example whether or not it is the last child of the article; :last-child, on the other hand, is used to select the element only if it is the last child of its parent. So, this:

p:last-child {
    font-style: italic;
}
                

will not style the last paragraph above because it is not the last child of its parent. You can read more about the :last-child selector in its entry.

The :last-of-type pseudo-class, just like other pseudo-classes, can be chained with other selectors such as :hover, for example, to provide hover styles for selected element. It can also be chained with pseudo-elements ::before and ::after. See the examples and live demo sections below for examples.

Examples

Suppose you have the following markup:

<div class="container">
    <h1>Title</h1>
    <nav>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
            <li>Fourth Item</li>
        </ul>
    </nav>
    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a>
        </p>
        <p>
            Lorem Ipsum...
        </p>
    </article>

    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum...
        </p>
        <p>
            Lorem Ipsum
        </p>
    </article>
</div>
                

The following rule will select the last article in the above .container:

article:last-of-type {
    background-color: #eee;
    border: 1px solid #ddd;
}
                

The following rule will select the last occurrence of a paragraph in its parent’s list of children:

p:last-of-type {
    font-weight: bold;
}
                

The following rule will select the last occurrence of a link inside its parent and use pseudo-elements to print the href of that link, wrapped in parenthesis, right after it:

a:last-of-type {
    color: deepPink;
}

a:last-of-type::after {
    content: "(" attr(href) ")";
    color: deepPink;
}
                

You can see a live demo of this example in the next section.

Browser Support

The :last-of-type pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.

Further Reading

Written by

Last updated February 3, 2015 at 12:33 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.