Home >CSS >CSS reference – properties, selectors, functions >:first-of-type and :last-of-type

:first-of-type and :last-of-type

selector:first-of-type selector:last-of-type

:first-of-type selects an element that is the first among siblings of the same type, :last-of-type the last one. Unlike :first-child it does not matter that there are elements of another type before it – p:first-of-type is the first paragraph even when a heading precedes it. Specificity 0-1-0.

Values

:first-of-type – the same as :nth-of-type(1).
:last-of-type – the same as :nth-last-of-type(1).
:only-of-type – the only element of its type in the parent.

Examples

The lead paragraph of an article is larger and the last paragraph has no bottom margin, even though the article starts with a heading and ends with a link:

<div class="article">
  <h4>Article heading</h4>
  <p>The lead paragraph is larger.</p>
  <p>Another paragraph.</p>
  <p>The last paragraph.</p>
  <a href="#">Read more</a>
</div>

.article h4 { margin: 0 0 6px; }
.article p { margin: 0 0 10px; }
.article p:first-of-type {
  font-size: 18px;
  color: #555;
}
.article p:last-of-type { margin-bottom: 0; }

result

Article heading

The lead paragraph is larger.

Another paragraph.

The last paragraph.

The type is the element name, not a class: .card:first-of-type does not select the first card, but an element with the card class that is the first element of its type. If the cards are div elements and another div precedes them, it selects nothing.
Without a type (.article :first-of-type) it applies to the first element of each type – the first heading, the first paragraph and the first link.
Hidden elements (display: none) count.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 3.5, Safari 3.1. As of October 2026 (MDN browser-compat-data).

:first-of-type and :last-of-type

Values

Examples

Article heading

Things to watch out for

Browser support