Definition and Usage

:last-of-type pseudo-class selector Selects the element that is the last sibling of the same tag type among its parent’s children.

"Same tag type" refers to the element's tag name.

For example, p:last-of-type selects the last <p> element among only the <p> elements that share the same parent.

Basic Example

HTML 
<section>
    <p>First 'p' element of its type</p>
    <div>First 'div' element of its type</div>
    <p>Second 'p' element of its type</p>
    <p>Third 'p' element of its type</p>
    <div>Second 'div' element of its type</div>
    <div>Third 'div' element of its type</div>
</section>
CSS 
/* Selects the last <p> element of its type among <section> children */
section p:last-of-type {
    background-color: yellowgreen;
}

/* Selects the last <div> element of its type among <section> children */
section div:last-of-type {
    background-color: orange;
}
Rendered Output

Syntax

CSS 
:last-of-type {
    /* ... */
}

Practical Examples

These examples help you understand how the :last-of-type pseudo-class selector works.

Styling the Last Paragraph Element

HTML 
<article>
    <h2>Heading Element</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</article>
CSS 
article p:last-of-type {
    background-color: yellowgreen;
}
Rendered Output

Styling Nested Elements

HTML 
<article>
    <div>This 'div' is the first one.</div>
    <div>This <span>nested 'span' is both the first and the last one.</span>!</div>
    <div>
        This <em>nested 'em' is the first one.</em>, but this <em>nested 'em' is the last one.</em>!
    </div>
    <div>This <span>nested 'span' is styled. It is both the first and the last one.</span>!</div>
    <p>This 'p' is both the first and the last one.</p>
    <div>This 'div' is the last one.</div>
</article>
CSS 
article :last-of-type { /* Same as article *:last-of-type과 동일 */
    background-color: yellowgreen;
}
Rendered Output

Things to Keep in Mind

The :last-of-type pseudo-class selector selects the element that is the last sibling of a specific tag type among its siblings.

"Same tag type" refers to the element's tag name.

Let's look at the following example:

HTML 
<style>
    .red-item:last-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li class="red-item">li</li>
    <li class="red-item">Expected to match, but it doesn't</li>
    <li>li</li>
</ol>
<!--
    * Did it select the last element with the .red-item class?
    * If so, that is incorrect.
    *
    * :last-of-type selects the last element of a given tag type among its siblings.
    *
    * .red-item:last-of-type can be broken down as follows:
    * => .red-item: targets elements with the class value 'red-item'.
    * => Specific type refers to the tag name.
    * => In this case, the <li> element is the specific type.
    * => The last <li> of this type must have the class 'red-item' to be selected.
    * => Therefore, none of the elements above match.
-->
Rendered Output No elements are matched by the .red-item:last-of-type selector.

Be careful! If you don't understand that the specific type refers to the tag name, the :last-of-type pseudo-class may seem like it's not working correctly.

Browser compatibility

Browser Compatibility for the :last-of-type Pseudo-Class
Selector
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
:last-of-type 1 12 3.5 3.1

Specifications

Specification for the :last-of-type Pseudo-Class
Specification
:last-of-type Selectors Level 4
#last-of-type-pseudo

References

See also