SASS offers various features over plain CSS to write simple and maintainable code, and advanced selectors are one of them. SASS contains the last child and the last type selector, which we will discuss in this tutorial.
The "last-child" selector allows developers to select the last element within a parent element. Additionally, it allows you to select the last HTML element regardless of its type. If the last element contains nested child elements, it will also apply the style to the nested elements since they are part of the last child element.
Users can use the "last-child" selector in CSS according to the following syntax.
.element :last-child {
/* CSS code */
}
The above syntax will select the last child element of the HTML element containing the "element" class name.
In the index.html file, we created the "container" div element and added two paragraphs and a div element as the last child element.
In the SCSS file, we use the "last-child" selector to select the last element of the container div element. In the output, we can observe that the style has been applied to the child div element.
File name – 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>
File name – style.scss
.container :last-child {
color: red;
}
After compilation, the following code is generated.
File name – style.css
.container :last-child {
color: red;
}
<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>
In the example below, we have added multiple child div elements inside the parent div element. Additionally, we added multiple levels of nested child elements within the last div element.
In the SCSS file, we use the last-child selector to select the last element of the parent div element. In the output, the user can observe that the style is also applied to the nested child elements of the last child element.
File name – 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>
File name – style.scss
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
After compilation, the following code is generated.
File name – style.css
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
<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>
The "last-of-type" selector allows developers to select the last element of a specific type within a parent div element. Therefore, we need to specify the element type using the selector when using the "last-of-type" selector. We can specify the element type using class name, tag name, element name, id, etc.
Users can use the SASS "last-of-type" CSS selector according to the following syntax.
p:last-of-type {
/* CSS code */
}
The above syntax selects the last "p" element in the parent element.
In the example below, we create a div element with a class name equal to "multiple". After that, we inserted two paragraph elements and the last div element.
In SASS, we use the "last-of-type" selector to select the last "p" element in the "multiple" element. The user can observe in the output that the style is applied to the last "p" element even though it is not the last child element.
File name – 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>
File name – style.scss
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
After compilation, the following code is generated.
File name – style.css
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
<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>
In the example below, we create multiple div elements containing the "fruit" class. Additionally, we create the last div element containing the "bike" class name.
In the SASS code, we use the ".fruit :last-of-type" selector to select the last element containing the "fruit" class name. In the output, the user can observe that it styles the second-to-last div element, which is the last element containing the "fruit" class name.
File name – 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>
File name – style.scss
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
After compilation, the following code is generated.
File name – style.css
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
<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 how 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 under any conditions. The 'last-of-type' element is used to select the last child element of a specific type within the parent element.
The above is the detailed content of Last child and last type selector in SASS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
