:last-of-type

Last updated on: March 14, 2013

The :last-of-type selector allows you to target the last occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article with a title, several paragraphs and an image:

<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <img src="...">
</article>

We want to make the last paragraph smaller, to act as a conclusion to the content (like an editor's note). Instead of giving it a class, we can use :last-of-type to select it:

p:last-of-type {
  font-size: 0.75em;
}

Using :last-of-type is very similar to :nth-child but with one critical difference: it is less specific. In the example above, if we had used p:nth-last-child(1), nothing would happen because the paragraph is not the last child of its parent (the <article>). This reveals the power of :last-of-type: it targets a particular type of element in a particular arrangement with relation to similar siblings, not all siblings.

The more complete example below demonstrates the use of :last-of-type and a related pseudo-class selector, :first-of-type.

Check out this Pen!

Other Resources

• Related to: first-of-type, nth-of-type, nth-last-of-type
• Mozilla Docs

Browser Support

:last-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.