CSS :last-of-type Selector

What You’ll Learn

The :last-of-type pseudo-class matches the last sibling of a specific tag type inside its parent. It is essential when mixed elements appear after your target.

Introduction

The :last-of-type selector in CSS is a structural pseudo-class that selects the last element of a specific type within its parent.

It is particularly useful when you need to target and style the last occurrence of a particular element without adding extra classes or IDs.

Definition and Usage

Write the element selector before the pseudo-class: p:last-of-type or li:last-of-type. The rule matches the last sibling of that tag type, regardless of what element types come after it.

📝 Syntax

The syntax for the :last-of-type pseudo-class is:

element:last-of-type {
  /* CSS properties */
}

element can be any valid HTML tag such as div, p, or li. The selector applies styles to the last element of that type among its siblings.

Basic Example

p:last-of-type {
  color: #b91c1c;
  font-weight: 700;
}

li:last-of-type {
  background: #fef9c3;
  font-style: italic;
}

Syntax Rules

• Matches the last sibling of the specified tag type inside the parent.
• Other element types before or after do not block the match.
• Combine with combinators: section > p:last-of-type for direct children.
• Tag in the selector must match the element you want to style.
• Do not confuse with :last-child, which requires being the last child overall.

:last-of-type vs :last-child

Related Selectors

• :first-of-type — matches the first element of a given tag among siblings
• :last-child — matches the last child of a parent (any type)
• :nth-of-type() — matches elements of a type by index
• > child combinator — limit matches to direct children

When to Use :last-of-type

:last-of-type is ideal when tag type matters more than overall position:

• Article closings — Emphasize the final paragraph even when a footer div follows.
• List items — Style the last <li> in a navigation menu.
• Mixed content blocks — Target the last heading or paragraph among varied siblings.
• Spacing resets — Remove bottom margin from the last paragraph in a section.
• Table columns — Style the last <td> in a row pattern.

Examples Gallery

Practice :last-of-type with paragraphs, lists, scoped selectors, and comparison with :last-child.

<style>
  p:last-of-type {
    color: #b91c1c;
    font-weight: 700;
  }
</style>

<section>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <p>This is the last paragraph.</p>
</section>

li:last-of-type {
  background: #fef9c3;
  font-style: italic;
  color: #854d0e;
}

div p:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

div p {
  margin-bottom: 0.75rem;
}

/* Matches the last p — works here */
p:last-of-type {
  border-left: 4px solid #2563eb;
  padding-left: 0.75rem;
}

/* Does not match — div is the last child */
p:last-child {
  border-left: 4px solid #ef4444;
}

💬 Usage Tips

• Any element type — Works with paragraphs, list items, headings, table cells, and more.
• Combine selectors — Use div p:last-of-type to target the last paragraph inside each div.
• Mixed siblings — Prefer :last-of-type when footers, asides, or other tags follow your target.
• Pair with :first-of-type — Style opening and closing elements in the same block symmetrically.
• No extra markup — Avoid adding classes like .last when structure is predictable.

⚠️ Common Pitfalls

• Confusing with :last-child — :last-of-type selects the last of a tag type, not the last child overall.
• Wrong tag in selector — p:last-of-type will not match a <span>; the tag must match.
• Multiple same-type siblings — Only the final one of that type matches, not every last-in-group if nested differently.
• Expecting last child — Use :last-child when you need the absolute last element regardless of type.
• Dynamic content — JavaScript-inserted elements of the same type can change which node matches.

♿ Accessibility

• Do not rely on position alone — Visual emphasis on the last item should not be the only way to convey importance.
• Semantic markup — Use proper heading and list structure; CSS position styling does not add meaning for assistive tech.
• Color contrast — Ensure highlight colors on the last paragraph or list item meet WCAG requirements.
• Focus order — Styling the last link in a menu does not change keyboard tab sequence.

💡 Best Practices