:last-of-type

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

/* Selects any paragraph, but only if it is the last paragraph inside */
/* its parent element (not necessarily the last child) */
p:last-of-type {
  color: lime;
}

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: chrisdavidmills,