YogeshChauhan . com

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>

 

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to check if radio button is checked or not using JavaScript?JavaScriptOOP, Class and Objects Strategies For Beginners (PHP)PHPIntroduction to components and templates Part 4: Pipes and DirectivesAngular@forward modules with a prefix in SCSS (Sass)SCSSClasses in JavaScript: The BasicsJavaScriptHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPLearn to make a responsive gallery using CSS Grid and without media queriesCSSHow to add multiple components in React app?ReactHow to create Glowing Text using CSS?CSSHow to get the height and width of an element using JavaScript?JavaScriptObject destructuring in JavaScript: Unpacking fields from objects passed as function parameterJavaScript5 Steps to Create a Line using Canvas Tag in HTML5HTML