How to Select the Last Element in CSS

Use :last-child when you need to style only the final item inside a parent. This is perfect for removing the last divider, changing the final card spacing, highlighting the newest item, or cleaning up list layouts.

What you’ll build or solve

You’ll learn how to select the last element in CSS using :last-child. You’ll also know when this is cleaner than adding extra classes in your HTML.

When this approach works best

This approach is the right choice when only the final repeated item needs a different style.

Common real-world scenarios include:

• Removing the last border in a list
• Removing the last card margin
• Highlighting the newest feed item
• Adjusting the last menu link
• Cleaning the last table row divider

This is a bad idea when the special style depends on meaning instead of position. In that case, use a class.

Prerequisites

You only need:

• A repeated HTML structure like list items, cards, or rows
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Apply :last-child to the repeated element

Start with a repeated list.

<ul class="updates">
  <li>USA rollout</li>
  <li>UK pricing</li>
  <li>France launch</li>
</ul>

<style>
  .updates li:last-child {
    font-weight: bold;
  }
</style>

A very common use case is removing the last divider or spacing rule.

<style>
  .updates li {
    border-bottom: 1px solid #ddd;
  }

  .updates li:last-child {
    border-bottom: none;
  }
</style>

What to look for:

• :last-child targets only the final sibling
• Great for removing final borders or margins
• Cleaner than manually adding last-item classes
• Works best on repeated sibling structures
• Use classes instead when meaning matters more than position

Examples you can copy

Remove last border

<ul class="menu">
  <li>USA</li>
  <li>UK</li>
  <li>France</li>
</ul>

<style>
  .menu li:last-child {
    border-bottom: none;
  }
</style>

Remove last card margin

<div class="cards">
  <div>USA</div>
  <div>UK</div>
  <div>France</div>
</div>

<style>
  .cards div:last-child {
    margin-bottom: 0;
  }
</style>

Highlight newest item

<ul class="feed">
  <li>USA metrics</li>
  <li>UK update</li>
  <li>France alert</li>
</ul>

<style>
  .feed li:last-child {
    background: #eef4ff;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Applying it to the parent container

What the reader might do:

.menu:last-child {
  color: red;
}

Why it breaks: this targets the list container itself only if it is the final child of its parent.

Corrected approach:

.menu li:last-child {
  color: red;
}

Mistake 2: Using it when the last visible item is not the last DOM item

What the reader might do:

.feed li:last-child {
  background: yellow;
}

Why it breaks: hidden or dynamically inserted elements may still count as the last child.

Corrected approach:

Confirm the DOM order or use a semantic class when the real “latest” item is data-driven.

Mistake 3: Using position for semantic meaning

What the reader might do:

.pricing li:last-child {
  background: blue;
}

Why it breaks: if item order changes, the wrong element gets the featured style.

Corrected approach:

Use a dedicated .featured class when the style depends on meaning.

Troubleshooting

If the wrong item styles, confirm all items are direct siblings.

If hidden elements interfere, check the actual DOM order.

If spacing still remains, make sure the base margin or border rule exists before removing it.

If the target changes dynamically, use a class instead of position logic.

Quick recap

• Use :last-child for the final sibling
• Great for removing final borders and margins
• Cleaner than manual last-item classes
• Works best on repeated sibling structures
• Use classes when semantic meaning matters