Jobs Hub

CSS :last-child

The CSS :last-child pseudo-class selects the last child element of its parent element. For example, the following CSS code applies style to all P that are last child of their parent element:

p:last-child {background-color: purple; color: white; padding: 8px;}

CSS :last-child Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p:last-child {font-weight: bold; color: orchid;}
   </style>
</head>
<body>

   <p>This is para one.</p>
   <p>This is para two.</p>
   <div>
      <p>This is para one, inside DIV.</p>
      <p>This is para two, inside DIV (the last para of DIV).</p>
   </div>
   <p>This is para three.</p>
   <p>This is para four (the last para of BODY).</p>
   
</body>
</html>
Output

This is para one.

This is para two.

This is para one, inside DIV.

This is para two, inside DIV (the last para of DIV).

This is para three.

This is para four (the last para of BODY).

CSS Online Test

« Previous Tutorial Next Tutorial »