CSS :last-of-type Pseudo-class

Definition and Usage

The :last-of-type pseudo-class matches an element that is the last of its tag name among sibling elements.

Example: p:last-of-type styles the last p under a parent, even if a div footer comes after it. Same match as :nth-last-of-type(1). For “must be last child of any type,” use :last-child.

CSS Syntax

Example: p:last-of-type { color: red; font-style: italic; }

Selector Forms

How to Use :last-of-type

Pick the tag you care about, then select the last sibling of that type.

1. Look at siblings under one parent (DevTools helps).
2. Write E:last-of-type for the last element of type E.
3. Style that last item (color, border, spacing).
4. If it must also be the overall last child, use :last-child.

*MDN: with no type written, the universal selector is implied.

Live Preview

Toggle between p:last-of-type and p:last-child on the same markup (paragraphs, then a footer).

CSS Examples

Each snippet focuses on :last-of-type. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  p:last-of-type {
    color: red;
    font-style: italic;
  }
</style>

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Footer note</div>

<style>
  dt {
    font-weight: bold;
  }

  dd:last-of-type {
    border: 2px solid orange;
  }
</style>

<dl>
  <dt>Vegetables:</dt>
  <dd>Tomatoes</dd>
  <dd>Cucumbers</dd>
  <dt>Fruits:</dt>
  <dd>Apples</dd>
  <dd>Oranges</dd>
</dl>

<style>
  article :last-of-type {
    background-color: pink;
  }
</style>

<article>
  <div>This div is first.</div>
  <div>This <span>nested span is last</span>!</div>
  <div>This <em>nested em is first</em>, but this <em>nested em is last</em>!</div>
  <p>This p qualifies!</p>
  <div>This is the final div!</div>
</article>

Key Takeaways