CSS :first-of-type Selector

What You’ll Learn

The :first-of-type pseudo-class matches the first element of a given tag type among its siblings. It is ideal when a heading or other element appears before your target.

Introduction

The :first-of-type selector in CSS is a structural pseudo-class used to target the first element of a specific type within its parent container.

Unlike :first-child, it ignores other tag types that appear earlier among siblings. This makes it perfect for styling the first paragraph after a heading, or the first list item in each list.

Definition and Usage

Write the element selector before the pseudo-class: p:first-of-type or li:first-of-type. The rule matches when that element is the first of its tag name among siblings inside the same parent.

📝 Syntax

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

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

Here, element is the HTML tag you want to target (such as p, li, or div). Only the first sibling of that type inside each parent matches.

Basic Example

p:first-of-type {
  font-weight: 700;
  color: #2563eb;
}

Syntax Rules

• Matching is based on element type, not overall child position.
• Each parent creates a separate sibling group for matching.
• Combine with combinators: ul > li:first-of-type for direct children.
• Different from :first-child, which requires being the first child of any type.
• Works with any element type that can appear multiple times as siblings.

:first-of-type vs :first-child

Related Selectors

• :last-of-type — matches the last element of a type among siblings
• :nth-of-type() — matches by index among elements of the same type
• :first-child — matches only when the element is the first child overall
• :only-of-type — matches when it is the sole element of its type among siblings

When to Use :first-of-type

:first-of-type is the right choice when tag type matters more than overall position:

• Article body — Style the first paragraph even when a heading comes first.
• Multiple lists — Highlight the first item in every <ul> on the page.
• Mixed content blocks — Target the first <div> in a section with varied markup.
• Table rows — Style the first <tr> in each <tbody>.
• When :first-child fails — Use when another element type precedes your target.

Examples Gallery

Practice :first-of-type with paragraphs, list items, mixed markup, and comparison with :first-child.

<style>
  p:first-of-type {
    font-weight: 700;
    color: #2563eb;
  }
</style>

<div class="container">
  <h2>Article Section</h2>
  <p>This is the first paragraph in the section.</p>
  <p>This is the second paragraph in the section.</p>
  <p>This is the third paragraph in the section.</p>
</div>

ul li:first-of-type {
  color: #b91c1c;
  font-weight: 700;
}

.section div:first-of-type {
  border-left: 4px solid #2563eb;
  padding-left: 0.75rem;
  background: #eff6ff;
}

/* Does NOT match — div is first child */
p:first-child {
  color: #ef4444;
}

/* DOES match — first p among siblings */
p:first-of-type {
  color: #2563eb;
  font-weight: 700;
}

⚠️ Common Pitfalls

• Confusing with :first-child — They behave differently when mixed element types are present.
• Wrong parent scope — Matching happens among direct siblings only; nested elements have their own groups.
• Expecting first of any type — p:first-of-type never matches a div; you must specify the tag.
• Single element of type — If only one p exists, it is both first and last of type; that is expected.
• Dynamic DOM changes — Inserting a new sibling of the same type before your target moves which element matches.

♿ Accessibility

• Do not rely on position styling alone — Visual emphasis on the first item should not be the only cue for importance.
• Semantic HTML first — Use proper headings and lists; pseudo-classes enhance presentation.
• Color contrast — Ensure styled first paragraphs and list items meet WCAG contrast requirements.
• Screen readers — Position-based styling does not change reading order or announcements.

💡 Best Practices