Jobs Hub

CSS :last-of-type

The CSS :last-of-type pseudo-class is used when we need to select the last child element of specified element type, of their parent.

For example, the following CSS code applies the style to last child element of type P, of their parent:

p:last-of-type {background-color: #ccc; padding: 8px; border: 3px solid green;}

CSS :last-of-type Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p:last-of-type {background-color: plum; padding: 10px;}
   </style>
</head>
<body>

   <p>This is para one.</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 two.</p>
   <p>This is para three (the last para of BODY).</p>
   
</body>
</html>
Output

This is para one.

This is para one, inside DIV.

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

This is para two.

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

CSS Online Test

« Previous Tutorial Next Tutorial »