W3docs
en
Log in

CSS :last-of-type Pseudo Class

The :last-of-type CSS pseudo-class selects the last element of its type among other sibling elements. Read about the pseudo-class and try examples.

The CSS :last-of-type pseudo-class selects an element that is the last element of its type among the children of its parent. "Type" here means the element's tag name — so p:last-of-type matches the last <p> inside its parent, regardless of how many other elements (divs, headings, spans) sit after it.

This page covers what :last-of-type matches, its syntax, how it behaves on different element types, and — importantly — how it differs from the similar-looking :last-child pseudo-class.

The :last-of-type pseudo-class is equivalent to :nth-last-of-type(1) and selects the exact same element.

When to use it

Reach for :last-of-type when you want to style the final element of a given tag without depending on its exact position. Common uses:

  • Removing the bottom margin or border from the last paragraph in a card.
  • Styling the last list item, image, or section in a container that mixes element types.
  • Targeting "the last one of its kind" when you can't be sure it's also the very last child of the parent.

If you instead need the element that is literally the last child of the parent — no matter its type — use :last-child. See the comparison below.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :last-of-type syntax

:last-of-type {
  css declarations;
}

Example of the :last-of-type selector:

:last-of-type code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>
Try it Yourself »

Targeting parent elements

The selector can also be applied to parent elements.

Info

The * selector is implied when no type selector is specified (e.g., *:last-of-type is equivalent to :last-of-type).

In the example below, article:last-of-type styles the last <article> among its siblings. Note how the pseudo-class is evaluated per type within each parent: the <em> elements are grouped separately from the <div> and <b> elements, so each tag has its own "last of type".

Example of targeting a parent element:

CSS :last-of-type Pseudo Class

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article:last-of-type {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <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>
      <b>This "b" qualifies!</b>
      <div>This is the final "div"!</div>
    </article>
  </body>
</html>
Try it Yourself »

:last-of-type vs :last-child

The :last-child and :last-of-type selectors look similar but answer different questions:

  • :last-child matches an element only if it is the very last child of its parent — position matters, type does not.
  • :last-of-type matches the last element of a given type, even if other elements come after it.

So p:last-of-type matches the last <p> even when a <span> follows it, while p:last-child would not match that <p> at all (because the <span> is the actual last child). In the example below, the rule applies to the last paragraph regardless of the spans, while span:last-child targets only the final span — which happens to be the last child of the body.

Example of CSS :last-of-type and :last-child selectors:

:last-of-type and :last-child selectors

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eee;
      }
      span {
        display: block;
      }
      span:last-child {
        background: #8ebf42;
        font-style: italic;
        font-weight: bold;
        color: #eee;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type and :last-child selectors example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </body>
</html>
Try it Yourself »

Gotchas

  • :last-of-type is scoped per parent: every parent element has its own "last paragraph", "last div", and so on.
  • It works on element types only. There is no class-based equivalent — .box:last-of-type means "the last element whose type matches the element that also has class box," not "the last element with class box." Use :last-child combined with a class, or :nth-last-of-type(), for finer control.
  • If a parent has only one element of a given type, that single element is its own :last-of-type (and :first-of-type).

Practice

Practice
What does the :last-of-type CSS pseudo-class match?
What does the :last-of-type CSS pseudo-class match?
Was this page helpful?