CSS :last-child Pseudo-Class

CSS :last-child Pseudo-Class

The CSS :last-child pseudo-class selects an element that is the last child of its parent. It is commonly used to style the final item in a list, remove spacing after the last element, and apply special formatting to the final child in a group.

:last-child Syntax

selector:last-child {
  property: value;
}

The :last-child pseudo-class is added directly to a selector without a space. It matches an element only when that element is the last child element of its parent.

Basic Example

li:last-child {
  color: #006699;
}

This rule selects an <li> element when it is the final child of its parent.

Paragraph Example

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

This rule removes the bottom margin from a paragraph when it is the final child of its parent.

Class Selector Example

.item:last-child {
  border-bottom: none;
}

This rule removes the bottom border from an element with the item class when it is the last child.

How :last-child Works

The :last-child pseudo-class checks an element's position among all element children of its parent.

HTML Example

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

CSS Example

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

The third list item matches because it is the last child of the <ul> element.

Element Position

The browser evaluates the position of each element among its siblings. Only the final element child of a parent can match :last-child.

Text Nodes and Comments

Text nodes and HTML comments do not count as element children for this selector.

Automatic Updates

If elements are added, removed, or reordered, the browser updates which element matches :last-child.

Different Element Types

The :last-child pseudo-class checks the last element child, regardless of its HTML element type.

HTML Example

<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <span>Final element.</span>
</div>

CSS Example

p:last-child {
  color: #cc3333;
}
span:last-child {
  color: #006699;
}

The <span> matches span:last-child because it is the final child. Neither paragraph matches p:last-child.

Important Distinction

The selector does not find the last element of a particular type. It finds an element that is last among all element children.

Selecting by Element Type

Use :last-of-type when the goal is to select the last sibling of a particular HTML element type.

:last-child vs. :first-child

The :last-child and :first-child pseudo-classes select opposite positions among an element's siblings.

Comparison

CSS Example

li:first-child {
  color: #008000;
}
li:last-child {
  color: #006699;
}

The first list item appears green, and the last list item appears blue.

When Both Match

If an element is its parent's only element child, it matches both :first-child and :last-child.

:last-child vs. :last-of-type

The :last-child and :last-of-type pseudo-classes differ when a parent contains multiple types of elements.

Comparison

HTML Example

<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <span>Final element.</span>
</div>

CSS Example

p:last-child {
  color: #cc3333;
}
p:last-of-type {
  color: #006699;
}

The second paragraph matches p:last-of-type because it is the last paragraph. It does not match p:last-child because the <span> follows it.

Choosing Between Them

Use :last-child when the final position among all children matters. Use :last-of-type when the final position among siblings of the same element type matters.

:last-child vs. :nth-last-child()

The :nth-last-child() pseudo-class provides more flexible selection based on positions counted backward from the end.

Comparison

CSS Example

li:last-child {
  font-weight: bold;
}
li:nth-last-child(2) {
  font-style: italic;
}

The last list item appears bold, and the second-to-last list item appears italic.

Equivalent Selectors

:last-child and :nth-last-child(1) match the same elements.

Nested Elements

The :last-child pseudo-class is evaluated separately for each parent element.

HTML Example

<div class="groups">
  <ul>
    <li>Group One - First</li>
    <li>Group One - Last</li>
  </ul>
  <ul>
    <li>Group Two - First</li>
    <li>Group Two - Last</li>
  </ul>
</div>

CSS Example

.groups li:last-child {
  color: #006699;
  font-weight: bold;
}

The last list item in each list matches because each <ul> has its own group of children.

Direct Child Selector

.groups > ul:last-child {
  border: 2px solid #006699;
}

This rule selects the final <ul> that is a direct child of the groups container.

Nested Lists

When working with nested lists, include the appropriate parent selector to avoid unintentionally styling the last item in every nested list.

Single Child Elements

An element that is its parent's only element child matches both :first-child and :last-child.

HTML Example

<div>
  <p>Only paragraph.</p>
</div>

CSS Example

p:first-child {
  color: #008000;
}
p:last-child {
  font-weight: bold;
}

The paragraph appears green and bold because it matches both selectors.

The :only-child Pseudo-Class

p:only-child {
  border: 1px solid #006699;
}

Use :only-child when the intention is to select an element that has no element siblings.

Combining Selectors

p:first-child:last-child {
  margin: 0;
}

This selector matches a paragraph that is both the first and last element child of its parent.

:last-child Specificity

The :last-child pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

li {
  color: #333;
}
li:last-child {
  color: #006699;
}

When both selectors match and other cascade factors are equal, the :last-child rule takes precedence because it has greater specificity.

Practical Uses

The :last-child pseudo-class is useful when the final item in a group requires different styling.

Removing the Final Border

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

Remove a divider from the final list item.

Removing Extra Spacing

.content p:last-child {
  margin-bottom: 0;
}

Remove unnecessary spacing after the last paragraph when it is also the final child.

Highlighting the Final Item

.steps li:last-child {
  font-weight: bold;
  color: #006699;
}

Emphasize the final step in a list.

Navigation Items

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

Remove the right margin from the final navigation list item.

Card Layouts

.card-list .card:last-child {
  border-bottom: none;
}

Remove the final divider in a vertical group of cards.

Limitations

The :last-child pseudo-class depends on an element's actual position among its siblings.

Not the Last of Its Type

An element does not match :last-child if another element of a different type follows it.

Structure Changes Affect Matching

Adding another element after the current last child changes which element matches.

Evaluated Per Parent

The selector does not find the last matching element across an entire document. Each parent's children are evaluated separately.

Hidden Elements Still Count

Elements hidden with CSS, including display: none, still count when determining the last child.

Whitespace Does Not Count

Whitespace text nodes do not affect which element matches :last-child.

Best Practices

• Use :last-child when styling depends on an element being the final child of its parent.
• Use :last-of-type when selecting the final sibling of a particular element type.
• Use :nth-last-child() for positions counted backward from the end.
• Include a parent or container selector when working with nested structures.
• Remember that hidden elements still affect child positions.
• Use :only-child when an element must have no element siblings.
• Keep selectors specific enough to avoid affecting unrelated groups.
• Test selectors when elements are dynamically added or removed.

:last-child Example

This example displays four list items with bottom borders. The :last-child pseudo-class removes the border from the final item and changes its text color.

HTML

<ul class="last-child-demo">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
</ul>

CSS

.last-child-demo {
  max-width: 250px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.last-child-demo li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.last-child-demo li:last-child {
  border-bottom: none;
  color: #006699;
  font-weight: bold;
}

Browser Result

Play in Editor

Note: The fourth list item matches :last-child because it is the final element child of the list. Its bottom border is removed, and its text appears blue and bold.

Browser Support

Baseline: Widely available. The :last-child pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

For current compatibility information, visit Can I Use? .

Specifications

The :last-child pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It matches an element that is last among its element siblings.

Selectors Level 4 - :last-child