CSS :first-child Selector

What You’ll Learn

The :first-child pseudo-class matches an element only when it is the very first child inside its parent. It is essential for list styling, spacing fixes, and position-based design.

Introduction

The :first-child selector in CSS is a structural pseudo-class used to match an element that is the first child of its parent container.

It lets you apply unique styles based on position in the DOM tree — for example, highlighting the first item in a list or removing extra top margin from the first paragraph in a section.

Definition and Usage

Write the element selector before the pseudo-class: li:first-child or p:first-child. The rule matches only when that element is the first child among all siblings inside its parent.

📝 Syntax

The syntax for the :first-child pseudo-class is:

element:first-child {
  /* CSS properties */
}

Here, element is the tag or selector for the child you want to style. The element must also be the first child of its parent to match.

Basic Example

ul > li:first-child {
  color: #b91c1c;
  font-weight: 700;
}

Syntax Rules

• The matched element must be the first child of its parent, regardless of tag type.
• Combine with combinators: div > p:first-child for direct children only.
• Any preceding sibling — even a different tag — prevents a match.
• Use *:first-child to target whatever element is first inside a container.
• Do not confuse with :first-of-type, which ignores other tag types.

:first-child vs :first-of-type

Related Selectors

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

When to Use :first-child

:first-child is ideal for position-based styling:

• Navigation lists — Style the first menu item differently.
• Article lead — Emphasize the opening paragraph when it is truly first.
• Spacing resets — Remove top margin or padding from the first child in a stack.
• Card grids — Highlight the first card in a row when markup order is predictable.
• Table rows — Style the first row in a tbody for header-like appearance.

Examples Gallery

Practice :first-child with lists, spacing, scoped paragraphs, and comparison with :first-of-type.

<style>
  ul > li:first-child {
    color: #b91c1c;
    font-weight: 700;
  }
</style>

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

.content > *:first-child {
  margin-top: 0;
}

.content > * {
  margin-top: 1rem;
}

div > p:first-child {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

/* Only matches if p is the first child */
p:first-child {
  border-left: 4px solid #ef4444;
  padding-left: 0.75rem;
}

/* Matches the first p among siblings */
p:first-of-type {
  border-left: 4px solid #2563eb;
  padding-left: 0.75rem;
}

⚠️ Common Pitfalls

• Wrong syntax explanation — The selector before :first-child is the child element, not the parent. Parent context comes from combinators like ul > li:first-child.
• Hidden siblings — An invisible or empty element before your target still counts as a preceding sibling.
• Text nodes — In some cases whitespace between tags can affect sibling relationships; keep markup clean.
• Expecting first of a type — Use :first-of-type or :nth-of-type(1) when tag type matters more than overall position.
• Dynamic content — JavaScript-inserted elements at the top can change which node is :first-child.

♿ Accessibility

• Do not rely on position alone — Visual emphasis on the first item should not be the only way to convey importance.
• Lists remain semantic — Use proper <ul> or <ol> markup; styling the first item does not replace list structure for screen readers.
• Focus order — Position styling does not change tab order; keep interactive elements logically ordered.
• Color contrast — Ensure first-child highlight colors meet WCAG contrast requirements.

💡 Best Practices