References

Beginner-friendly references for web development, with live, editable examples.

The CSS :last-child selector

Selector CSS All modern browsers Updated
Quick answer

The CSS :last-child pseudo-class selects an element that is the last child of its parent — li:last-child matches the final list item. It is most often used to remove the bottom border or margin from the last item of a list. It only matches if the element is truly the last child.

Overview

:last-child is the mirror of :first-child: it matches an element when it is the final child of its parent. .row:last-child targets the last row in a group.

Its classic job is removing the trailing divider from a list. When every item has a bottom border to separate it from the next, the last item's border is redundant — .item:last-child { border-bottom: 0; } drops it so the list ends cleanly. Together with :first-child it tidies both ends in two short rules.

The same counting subtlety applies: it considers all siblings, so p:last-child only matches if the last child is a paragraph. Use :last-of-type when you want the last element of a specific type regardless of what follows it.

Syntax

/* no divider after the last item */
.item:last-child {
  border-bottom: 0;
}

Example

Live example 
<style>
  .menu div { border-bottom: 1px solid #e2e8f0; padding: 10px 0; font: 15px system-ui, sans-serif; }
  .menu div:last-child { border-bottom: 0; }
</style>
<div class="menu">
  <div>Home</div>
  <div>About</div>
  <div>Contact (no divider)</div>
</div>

Best practices

  • Use it to remove the trailing border or margin from the last item of a list.
  • Combine it with :first-child to tidy both ends of a group.
  • Remember it counts among all siblings — use :last-of-type to ignore other element types.
  • Switching to gap for spacing often removes the need to special-case the last item at all.

Frequently asked questions

What does :last-child do in CSS?
It selects an element that is the last child of its parent, e.g. li:last-child matches the final list item.
How do I remove the border from the last list item?
Use .item:last-child { border-bottom: 0; } so the list ends without a trailing divider.
Why is :last-child not working?
It only matches if the element is truly the last child. If another element follows it, use :last-of-type to match the last of that type.
What is the difference between :last-child and :last-of-type?
:last-child matches only the very last child; :last-of-type matches the last element of its type, whatever comes after.
#id :not()