:last-child Pseudo-Class

CSS :last-child Pseudo-Class

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

The :last-child Pseudo-Class

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

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

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

How :last-child Works

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

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

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

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

Using :last-child with Lists

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

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

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

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

Using :last-child with Paragraphs

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

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

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

The second paragraph matches p:last-child because no other element appears after it inside the parent.

The Parent Matters

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

<section>
  <p>First paragraph.</p>
  <p>Last paragraph.</p>
  <footer>Additional information</footer>
</section>

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

Neither paragraph matches. Although the second <p> is the last paragraph, the <footer> is the last element child of the <section>.

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

Removing Spacing from the Last Item

A practical use for :last-child is removing a margin, border, or other separator that is not needed after the final item in a group.

li {
  margin-bottom: 10px;
}

li:last-child {
  margin-bottom: 0;
}

Every list item receives bottom spacing except the last one. This avoids adding an extra class to the final item simply to remove its margin.

:last-child vs :first-child

The :last-child and :first-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.

When to Use :last-child

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

Because the selector depends on the HTML structure, adding another element after the selected element can change whether :last-child matches.

Summary

The CSS :last-child pseudo-class selects an element when it is the last 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 :nth-child() pseudo-class, which can select elements according to their numbered positions or repeating patterns within a parent.