:last-of-type

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. User Avatar
    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)

    • User Avatar
      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.

    • User Avatar
      Tiffany Tse
      Permalink to comment#

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

    • User Avatar
      Pan Stav
      Permalink to comment#

      Same here..
      Chrome 31.0.1612

    • User Avatar
      Marcos
      Permalink to comment#

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

  2. User Avatar
    Miguel

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

  3. User Avatar
    Robert

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

  4. User Avatar
    Paul Sanders
    Permalink to comment#

    It looks like these *-of-type selectors can be disrupted (in Chrome at least) by dynamically generated elements inserted into the parent container. For instance, if some js code inserts a div into the parent, your original last-of-type will lose track of the element to which it was attached.

  5. User Avatar
    Sten Hougaard
    Permalink to comment#

    Too bad that “last-of-type” is not actually implemented correctly.

    A type should be what is specified before the :last-of-type, so if I have “.January” as the “type”, the “.January:last-of-type” should hit the last occurrence elements with the class “.January“, which it does not (using Chrome 39.0.2171.95 (64-bit), OS X).

  6. User Avatar
    David
    Permalink to comment#

    Just started a web design class and I am having the same problem. How do I fix it?

  7. User Avatar
    Alfonse
    Permalink to comment#

    So I tested this out and apparently it ONLY applies to HTML elements and not by class-names unfortunately.

    In the spec it states:

    The :last-of-type CSS pseudo-class represents the last sibling with the given element name in the list of children of its parent element.

    So doing something like this won’t work:

    .foo:last-of-type {color: red;}
    

    But doing this will work:

    p:last-of-type {color:red;}
    
    • User Avatar
      TylerH

      You’re mistaken. :last-of-type works on class names and IDs just fine. The term “element” in the spec you quoted doesn’t refer to “tag name”, it refers to a general “element”. How you select that element is irrelevant. Example: https://jsfiddle.net/6cd83wb4/1/

    • User Avatar
      Jan Hartmann
      Permalink to comment#

      @TylerH: You’re wrong:

      https://jsfiddle.net/6cd83wb4/2/

    • User Avatar
      Azarel
      Permalink to comment#

      @TylerH @Jan Hartmann Ok so you’re both right and wrong at the same time here lads. This is really weird behavior so bear with me.

      It appears that using a class with :last-of-type results in something that I can only describe as *.class:first-of-class. So what exactly happens here? Well it does bind last-of-type to the html tag. Whether it be a div or a p or whatever. But that ‘last’ element must also have the css tag which is why Jan’s example doesn’t result in anything highlighted because whilst it does bind to the class as in this rule is applied using the class selector to any html elements the actual :last-of-type is bound to the html tags so you can’t have multiple classes using the same html tag and expact multiple :last-of-type highlights.

      Now, this doesn’t happen to affect me because I’m writing web components which means that my element tag names are largely unique meaning that the class selector syntax is very helpful for filtering styling within lists and such.

  8. User Avatar
    Neha
    Permalink to comment#

    Below worked for me:

    .PFourTiles{
    margin: 20px 13px 0px 0px;
    }
    .pseudo-primary{
    .PFourTiles:last-of-type {
    margin: 20px 0px 0px 0px;
    }
    }

  9. User Avatar
    Kristina
    Permalink to comment#

    Question, is it possible to create link that shows the lastest img from the latest article in one specific category?

    I want to have one picture in my header that will change and my readers have the possibility to read more if they are interested.

    For example: I have several categories and I want a preview on my index page but only the first picture from the latest article in one of those categories..

    hard to explain but several bloggers use that type of preview right now and I want that as well, but I don’t use wordpress so I have to find a way to solve that problem..

    please help!

    (inthefrow.com, lilypebbles.co.uk, viviannadoesmakeup.com, heyclaire.com – you get the picture..)

    kind regards Kristina

  10. User Avatar
    Andy
    Permalink to comment#

    Try this:

    .theList>p:nth-last-of-type(1) {
    background: #ff0000;
    }

    where .theList is your container element

  11. User Avatar
    Tony Scialdone
    Permalink to comment#

    Here’s what I’m looking for:

    .className a:first-of-type[href*=”string”]

    I can’t get it to work with either first-of-type or last-of-type. Has anyone been able to get this working, or is using both selectors simply not supported?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag