/* 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

<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> 

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

Styling a list

<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> 

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

Specifications

See also