:first-child Pseudo-Class

CSS :first-child Pseudo-Class

The CSS :first-child pseudo-class selects an element when it is the first child of its parent. It is useful for styling the first item in a group without adding a class to the HTML.

The :first-child Pseudo-Class

The :first-child pseudo-class is added directly to a selector with no space between the selector and the colon.

li:first-child {
  font-weight: bold;
}

The selector li:first-child matches an <li> element when that element is the first child of its parent.

How :first-child Works

The :first-child pseudo-class looks at an element's position among the children of its parent. The element must be the first element child of that parent for the selector to match.

<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

p:first-child {
  color: #0088cc;
}

The first paragraph matches because it is the first element child of the <div>. The second paragraph does not match.

Using :first-child with Lists

One common use for :first-child is styling the first item in a list.

li:first-child {
  color: #0088cc;
  font-weight: bold;
}

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Only the first <li> is selected because it is the first child of the <ul>.

Using :first-child with Paragraphs

The same pseudo-class can be used with paragraphs or many other HTML elements.

p:first-child {
  font-weight: bold;
}

<section>
  <p>This paragraph is the first child.</p>
  <p>This paragraph is not the first child.</p>
</section>

The first paragraph matches p:first-child because no other element appears before it inside the parent.

The Parent Matters

A common mistake is to read p:first-child as meaning "the first paragraph." It actually means "a paragraph that is the first child of its parent."

<section>
  <h2>Heading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</section>

p:first-child {
  color: #0088cc;
}

Neither paragraph matches. Although the first <p> is the first paragraph, the <h2> is the first element child of the <section>.

This distinction is important when using structural pseudo-classes because they select elements according to their position within the parent.

:first-child vs :last-child

The :first-child and :last-child pseudo-classes select elements at opposite ends of a parent's children.

li:first-child {
  font-weight: bold;
}

li:last-child {
  font-style: italic;
}

The first rule selects the first list item, while the second selects the last list item. The next tutorial covers :last-child in more detail.

When to Use :first-child

Use :first-child when an element should receive styles because it appears first among the element children of its parent. Common uses include styling the first list item, removing spacing from the first item in a group, or giving the first element a different visual treatment.

Because the selector depends on the HTML structure, remember that adding another element before the selected element can change whether :first-child matches.

Summary

The CSS :first-child pseudo-class selects an element when it is the first element child of its parent. It provides a convenient way to style elements according to their position without adding extra classes to the HTML.

The next tutorial covers the :last-child pseudo-class, which selects an element when it is the last child of its parent.