Yogesh Chauhan's Blog

The :last-of-type selector

in CSS on September 23, 2020

The :last-of-type selects the element that is the last child, of a particular type, of its parent.

For e.g., in the code below the css selects the last paragraph and the last heading h2.

<!DOCTYPE html>
p:last-of-type {
 background: #C5CAE9;

h2:last-of-type {
 background: #CDDC39;


<div class="container">
 <p>1st paragraph</p>
 <p>2bd paragraph</p>
 <p>last paragraph</p>
 <h1>1st Heading</h1>
 <h2>1st heading</h2>
 <h2>last heading</h2>



Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
addcslashes() and addslashes() String Functions in PHPPHPHow to create a multisite network in WordPress?WordPressThe Differences Between HAVING Clause and WHERE Clause in SQLSQL/MySQLLearn to make a responsive gallery using CSS Grid and without media queriesCSSHow to remove trailing characters from a string using JavaScript?JavaScriptResponsive Masonry Grid using CSS columns PropertyCSSControl Scrolling with CSS Scroll SnapCSSclip and clip-path properties in CSSCSSHow to change value of a span tag using a reference from another div using jQuery?jQuery4 different ways to create JavaScript ObjectsJavaScriptHow destructuring works in React?ReactHow to create Flickering Texts using CSS?CSS