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>
<html>
<head>
<style> 
p:last-of-type {
 background: #C5CAE9;
}

h2:last-of-type {
 background: #CDDC39;
}
</style>
</head>

<body>

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

</body>
</html>

 


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What’s Interpolation in SCSS (Sass)?SCSSHow Do You Make a Private VPN?MiscellaneousSolution for “Yarn build: Failed because of a stylelint error”WordPressWhat are Google Web Stories and How to create them in WordPress?WordPressNATURAL JOIN in PostgresPostgresSELF JOIN in PostgresPostgresbin2hex() and chr() String Functions in PHPPHPKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscellaneousHow to refresh a page using PHP at regularly occurring intervals?PHPLearn how to use Self JOIN in SQL and MySQLSQL/MySQLWhat’s a repository on Github?MiscellaneousArguments in @mixin rules in SCSS (Sass)SCSS