Summary

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

Usage note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:last-of-type

Example

To match the last em element inside a <p> element, you can use this:

p em:last-of-type {
  color: lime;
}
<p>
  <em>I'm not lime :(</em>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <strong>I'm also not lime :(</strong>
</p>

<p>
  <em>I'm not lime :(</em>
  <span>
     <em>I am lime!</em>
  </span>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <span>
    <em>I am also lime!</em>
    <strike> I'm not lime </strike>
  </span>
  <strong>I'm also not lime :(</strong>
</p>

...will result in:

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':last-of-type' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':last-of-type' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.9.1) 9.0 10.0 3.2

See also

Document Tags and Contributors

 Last updated by: GrantSolar,