CSS :last-child Pseudo-Class

What is :last-child?

The :last-child pseudo-class represents the last element among a group of sibling elements within its containing block. As a structural pseudo-class defined in the CSS Selectors Level 3 specification, :last-child enables developers to target and style the final child element without requiring additional classes or JavaScript.

Unlike adding a specific class to the last element manually, :last-child automatically identifies and targets the final child based on the document structure. This approach eliminates the need for JavaScript to determine which element should receive special styling and ensures consistent behavior regardless of content changes.

Structural Pseudo-Classes Explained

Structural pseudo-classes like :last-child select elements based on their position within the document tree rather than their attributes or content. These selectors enable powerful styling patterns that adapt to the structure of HTML without requiring manual class assignments.

Related Selectors: :first-child, :nth-child(), :nth-last-child(), :nth-of-type

Basic Syntax and Usage

Simple Element Selection

The fundamental syntax for :last-child follows a straightforward pattern:

element:last-child {
 /* CSS properties to apply to the last child */
}

When you apply this selector, the browser evaluates each element matching the specified tag name and checks whether it is the last child of its parent. If the element is indeed the last child, the styles apply; otherwise, the selector matches nothing.

Practical Example: Styling Paragraphs

Consider a container with multiple paragraphs where you want to apply distinct styling to the final paragraph:

<div>
 <p>First paragraph with standard styling.</p>
 <p>Second paragraph with standard styling.</p>
 <p>Third paragraph that will receive special styling.</p>
</div>

p:last-child {
 color: #2c5282;
 font-weight: bold;
 padding-bottom: 1rem;
 border-bottom: 2px solid #e2e8f0;
}

This pattern proves especially useful for article layouts where you might want to add visual separation after the final paragraph, or for creating distinctive call-to-action elements that conclude a content section. For related styling techniques, explore our guide on responsive design patterns.

Practical Applications Across HTML Elements

List Item Styling

Navigation menus and item lists frequently benefit from :last-child styling:

nav li {
 display: inline-block;
 margin-right: 1rem;
 padding-right: 1rem;
 border-right: 1px solid #cbd5e0;
}

nav li:last-child {
 margin-right: 0;
 padding-right: 0;
 border-right: none;
}

This pattern ensures visual consistency by eliminating unwanted borders from the final navigation item. This technique is particularly valuable when building accessible navigation menus that adapt to different screen sizes.

Table Row Styling

Data tables often use :last-child to differentiate footer rows:

tr:last-child {
 font-weight: bold;
 background-color: #f7fafc;
 border-top: 2px solid #2d3748;
}

Working with Classes

When elements share a class name, :last-child can be combined with class selectors:

.item:last-child {
 background-color: #f0fff4;
 border-left: 4px solid #48bb78;
}

This approach is essential when creating grid layouts and card-based designs where the final element needs distinct styling.

Understanding :last-child Versus :last-of-type

Key Distinctions

The :last-child and :last-of-type pseudo-classes serve different purposes:

Example HTML:

<article>
 <h2>Title</h2>
 <p>First paragraph.</p>
 <p>Second paragraph.</p>
 <p>Third paragraph.</p>
 <span>Note.</span>
</article>

• p:last-child → Matches nothing (last child is <span>)
• p:last-of-type → Matches the third <p>
• :last-child → Matches the <span> element

Choosing the Right Selector

Use :last-child when you need to style the final element regardless of type, such as removing margins from the last item in a navigation list. Use :last-of-type when you need to style the final occurrence of a specific element type. For more advanced selector patterns, check our guide on advanced CSS selectors.

Sources

1. MDN Web Docs - CSS :last-child Selector - The authoritative CSS reference from Mozilla providing official specification details and browser compatibility information.

2. W3Schools - CSS :last-child Pseudo-class - Popular tutorial reference with practical examples and usage patterns for beginners.

3. Scaler Topics - CSS Last Child Selector Guide - Comprehensive educational guide with detailed code examples and visual demonstrations.