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

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

:last-child

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

/* Selects any <p> that is the last element    among 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

Examples

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
Selectors Level 4 # the-last-child-pseudo

See also

:-moz-last-node :last-of-type :first-child :nth-child Select your preferred language English (US)DeutschEspañolFrançais日本語PolskiPortuguês (do Brasil)Русский中文 (简体) Change language