How to Select the Last Element of a Specific Type

Solution with CSS

The CSS :last-of-type pseudo-class will help us to select the last element of its type div, span, p, article, etc among a group of its siblings (direct child of its parent)

It may seem a little bit confusing at first, but with the examples below you will understand it completely once and for all!

Let's start with a simple example and extend it step by step to understand this concept well :

Example of selecting the last element of a specific type

<!DOCTYPE html>
<html>
  <head>
    <title>last-of-type pseudo class</title>
  </head>
  <body>
    <style>
      main :last-of-type {
        background-color: aqua;
      }
    </style>
    <main>
      <div>I'm the first div inside the main!</div>
      <div>Hi, this is the second div here!</div>
      <p>I'm a p tag which is alone here! But hey, look at my color!</p>
      <div>I'm the last div here, look at my color!</div>
    </main>
  </body>
</html>

Try it Yourself »

In the code above, we have a main tag as our parent for div & p tags. We specified in the CSS that we want the last element of its type inside the main tag to have a background color of aqua. The selector main :last-of-type { background-color: aqua; } uses a space, which is a descendant combinator. This means it targets the last element of its type among all descendants of the main tag, not just direct children.

So the last div and the only p inside the main tag will be aqua color.

Here's the result so far:

Example of selecting the last  element of a specific class:

<!DOCTYPE html>
<html>
  <head>
    <title>last-of-type pseudo class</title>
  </head>
  <body>
    <style>
      main :last-of-type {
        background-color: aqua;
      }
    </style>
    <main class="example-wrapper">
      <div>I'm the first div inside the main tag!</div>
      <div>Hi, this is the second div here!</div>
      <p>I'm a p tag which is alone here! But hey, look at my color</p>
      <div>I'm the last div here, look at my color!</div>
    </main>
  </body>
</html>

Try it Yourself »

Now, let's extend it a little bit by adding other tags in between our existing tags. Here we go:

How to Select the Last Element of a Specific Type

<style>
  main :last-of-type {
    background-color: aqua;
  }
</style>
<main>
  <div>
    I'm the first div inside the main! <span>I'm a span here</span> And
    <span>I'm the other span in here!</span>
  </div>
  <div>Hi, this is the second div here! Now I have a <span>span</span> too.</div>
  <p>I'm a <u>paragraph</u> tag here! And I'm an <em>em</em> tag in p!</p>
  <p>Now I'm the last p!</p>
  <div>I'm the last div here, look at my color! But hey, I think I'm not the last now! There's a div next after me!</div>
  <div>Now I'm the last div!</div>
</main>

Try it Yourself »

So as you saw, we added some span, em, and p tags inside of direct children of the main tag.

Because of the descendant combinator, :last-of-type evaluates each parent element separately. Any element that is the last of its type among its siblings will be selected, regardless of its depth inside the main tag.

For example, in the  first div , we added two  span  tags. The last one is selected as the last of type span because it is the last  among its siblings. The <div> itself is selected as the last <div> among its siblings in the main tag.

Now you'll have a good grasp of using the :last-of-type  pseudo class.

Here's the final result:

<main class="example-wrapper">
  <div>I'm the first div inside the main! <span>I'm a span here</span> And <span>I'm the other span in here!</span></div>
  <div>Hi, this is the second div here! Now I have a <span>span</span> too.</div>
  <p>I'm a paragraph tag here! And I'm an em tag in p!</p>
  <p>Now I'm the last p!</p>
  <div>I'm the last div here, look at my color! But hey, I think I'm not the last now! There's a div next after me!</div>
  <div>Now I'm the last div!</div>
</main>

In this structure, the last <div>, the last , and the last  inside each <div> will receive the aqua background color. Note that :last-of-type differs from :last-child, which only matches an element if it is the very last child of its parent, regardless of its tag name.