Grow your CSS skills. Land your dream job.

:last-of-type

Last updated on:

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

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works 3.2+ Works 9.5+ 9+ Works Works

: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.

Comments

  1. Brian FitzGerald
    Permalink to comment#

    I find it rather odd that: .myClass:last-of-type does not work, yet .myClass:first-of-type does work! I wonder why they didn’t keep this consistent (Chrome version 28.0)

    • Brian FitzGerald
      Permalink to comment#

      Odd – I’m tripping! This does actually seem to work as expected. Not sure what was causing my earlier issue.

    • Tiffany Tse
      Permalink to comment#

      I am having the same issue. Are you sure it was a mistake? Or perhaps it was a bug…

    • Pan Stav
      Permalink to comment#

      Same here..
      Chrome 31.0.1612

    • Marcos
      Permalink to comment#

      “last-of-type” only refers to the element, not the attributes …

  2. Marcos is right about last-of-type in Chrome it doesn’t work when I refer to a class. Thanks for that!

  3. Thanks! I had a shady memory of this CSS-”trick” and had to check your site. Result! :)

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".