last-of-type property

Author admin Reading 2 min Views 398 Published by April 1, 2012 Modified by September 18, 2024

Contents

Definition and Usage
Syntax
Examples
Compatibility
Desktop browsers
Mobile browsers

Definition and Usage

The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.

Syntax

element:last-of-type { style properties }

Examples

To match the last em element inside a p element, you can use this:

p em:last-of-type { 
  
  color: lime; 
  
}

<p> 
  
  <em>I'm not lime :(</em> 
  
  <strong>I'm not lime :(</strong> 
  
  <em>I'm lime :D</em> 
  
  <strong>I'm also not lime :(</strong> 
  
</p> 
  
<p> 
  
  <em>I'm not lime :(</em> 
  
  <span><em>I am lime!</em></span> 
  
  <strong>I'm not lime :(</strong> 
  
  <em>I'm lime :D</em> 
  
  <span><em>I am also lime!</em> <strike> I'm not lime </strike></span> 
  
  <strong>I'm also not lime :(</strong> 
  
</p>