Firefox Tomorrow

css pseudo class

`:last-of-type` CSS pseudo-class

View on MDN ↗

The :last-of-type CSS pseudo-class represents the last element of its type (tag name) among a group of sibling elements.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:last-of-type {
  border: 2px solid orange;
}

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

Syntax

:last-of-type {
  /* ... */
}

Examples

Styling the last paragraph

HTML

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

CSS

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

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector (*) is implied when no simple selector is written.

HTML

<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>

CSS

article :last-of-type {
  background-color: pink;
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Multiple selectors elements

This HTML example contains nested elements of different types. The CSS contains both type selectors and class selectors.

HTML

<p>This `p` is not selected.</p>
<p>This `p` is not selected either.</p>
<p>
  This `p` is last `p` element of its parent e.g. `body` selected by `p` type
  selector.
</p>
<div class="container">
  <div class="item">This `div` is not selected.</div>
  <div class="item">This `div` is not selected either.</div>
  <div class="item">
    This `div` is last `div` element of its parent `div` selected by `.container
    .item` class selector.
  </div>
  <p class="item">
    This `p` is last `p` element of its parent `div` selected by `.container
    .item` class selector.
  </p>
</div>

CSS

p:last-of-type {
  background: skyblue;
}

.container .item:last-of-type {
  color: red;
  font-weight: bold;
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

The last <div> and the last <p> are both red and bold as the .item:last-of-type selects the last of every type if that last element also has the item class.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also