Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Last-child and last-of-type selector in SASS
The SASS provides various features over the normal CSS to write easy and maintainable code, and advanced selectors are one of them. A SASS contains the last-child, and last-of-type selectors, which we will discuss in this tutorial.
Last-child Selector in SASS
The ‘last-child’ selector allows developers to select the last element inside the parent element. Also, it allows you to select the last HTML element regardless of the type of the element. If the last element contains the nested child elements, it also applies style to the nested element as they are a part of the last child element.
Syntax
Users can follow the syntax below to use the ‘last-child’ selector in CSS.
.element :last-child {
/* CSS code */
}
The above syntax will select the last child of the HTML element containing the ‘element’ class name.
Example
In the index.html file, we created the ‘container’ div element and added two paragraphs and a single div element as a last child element.
In the SCSS file, we used the ‘last-child’ selector to select the last element of the container div element. In the output, we can observe that styles are applied to the child div element.
Filename – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Filename – style.scss
.container :last-child {
color: red;
}
After compilation, it generates the below code.
Filename – style.css
.container :last-child {
color: red;
}
Example
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.container :last-child {
color: red;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Example
In the example below, we added the multiple child div elements in the parent div element. Also, we added the nested child elements at multiple levels in the last div element.
In the SCSS file, we used the last-child selector to select the last element of the parent div element. In the output, users can observe that styles are also applied to the nested child elements of the last child element.
Filename – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Filename – style.scss
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
After compilation, it generates the below code.
Filename – style.css
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
Example
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Last-of-type Selector in SASS
The ‘last-of-type’ selector allows developers to select the last element of a particular type in the parent div element. So, we require to specify the element type using a selector while using the ‘last-of-type’ selector. We can specify element type using the class name, tag name, element name, id, etc.
Syntax
Users can follow the syntax below to use SASS's ‘last-of-type’ CSS selector.
p:last-of-type {
/* CSS code */
}
The above syntax selects the last ‘p’ element in the parent element.
Example
In the example below, we created the div element with a class name equal to ‘multiple’. After that, we inserted the two paragraph elements and the last div element.
In SASS, we used the ‘last-of-type’ selector to select the last ‘p’ element in the ‘multiple’ element. Users can observe in the output that style is applied to the last ‘p’ element, even if it is not a last child element.
Filename – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "multiple">
<p class = "single"> First </p>
<p class = "single"> Second </p>
<div class = "last">
Last element
</div>
</div>
</body>
</html>
Filename – style.scss
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
After compilation, it generates the below code.
Filename – style.css
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
Example
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="multiple">
<p class="single"> First </p>
<p class="single"> Second </p>
<div class="last">
Last element
</div>
</div>
</body>
</html>
Example
In the example below, we created the multiple div elements containing the ‘fruit’ class. Also, we created the last div element containing the ‘bike’ class name.
In the SASS code, we used the ‘.fruit :last-of-type’ selector to select the last element containing the ‘fruit’ class name. In the output, users can observe that it has styled the second last div element, which is the last element containing the ‘fruit’ class name.
Filename – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "fruit">
Apple
</div>
<div class = "fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class = "bike">
This is bike div.
</div>
</body>
</html>
Filename – style.scss
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
After compilation, it generates the below code.
Filename – style.css
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
Example
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="fruit">
Apple
</div>
<div class="fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class="bike">
This is bike div.
</div>
</body>
</html>
Users learned to use the ‘last-child’ and ‘last-of-type’ selectors in SASS. The ‘last-child’ selector is used to select the last element in the parent element in any conditions. The ‘last-of-type’ element is used to select the last child element of a particular type in the parent element.
2K+ Views
