CSS :last-child Selector

What You’ll Learn

The :last-child pseudo-class matches an element only when it is the very last child inside its parent. It is essential for list dividers, menu styling, and bottom spacing fixes.

Introduction

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

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

Definition and Usage

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

📝 Syntax

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

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

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

Basic Example

li:last-child {
  color: #1d4ed8;
  font-weight: 700;
}

Syntax Rules

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

:last-child vs :last-of-type

Related Selectors

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

When to Use :last-child

:last-child is ideal for position-based styling at the end of a group:

• Navigation lists — Remove the border or divider after the final menu item.
• Stacked content — Remove bottom margin from the last paragraph in an article block.
• Spacing resets — Strip extra padding below the last child in a card or panel.
• Card grids — Style the final card in a row when markup order is predictable.
• Table rows — Round corners or remove border on the last row in a tbody.

Examples Gallery

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

<style>
  li:last-child {
    color: #1d4ed8;
    font-weight: 700;
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

div p:last-child {
  margin-bottom: 0;
}

div p {
  margin-bottom: 1rem;
}

li {
  border-bottom: 1px solid #e2e8f0;
  padding: 0.65rem 0.9rem;
}

li:last-child {
  border-bottom: none;
}

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

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

💬 Usage Tips

• Any element type — Apply :last-child to paragraphs, divs, table rows, or list items.
• Combine selectors — Use div p:last-child to target only the last paragraph inside a div.
• Border cleanup — Pair with border-bottom on all items and :last-child { border-bottom: none; }.
• Spacing stacks — Reset margin-bottom or padding-bottom on the final child in a group.
• When type matters — Switch to :last-of-type if other tags may follow your target element.

⚠️ Common Pitfalls

• Expecting last of a type — :last-child targets the last child of any type. Use :last-of-type for the last element of a specific tag.
• Hidden trailing elements — An invisible or empty element after your target still counts as a following sibling.
• Script or style tags — In some legacy markup, trailing elements can block :last-child from matching your intended node.
• Dynamic content — JavaScript-appended elements at the end can change which node is :last-child.
• Wrong syntax — The selector before :last-child is the child element, not the parent. Use ul > li:last-child for context.

♿ Accessibility

• Do not rely on position alone — Visual emphasis on the last item should not be the only way to convey importance.
• Lists remain semantic — Use proper <ul> or <ol> markup; styling the last 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 last-child highlight colors meet WCAG contrast requirements.

💡 Best Practices