The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

/* Selects any <p> that is the last element
   amoung its siblings */
p:last-child {
  color: lime;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:last-child

Example

Basic example

HTML

<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>

CSS

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Result

Styling a list

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':last-child' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':last-child' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 9.0 9.5 3.2
No parent required 57 ? 51 (51)[1] ? 44 ?
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) 1.0 (1) 9.0 10 3.2
No parent required 57 57 ? 51.0 (51)[1] ? 44 ?

 

[1] See bug 1300374.

See also

Document Tags and Contributors

 Last updated by: mfluehr,