Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Last-child and last-of-type selector in SASS
SASS provides advanced selectors that extend CSS functionality, including :last-child and :last-of-type pseudo-selectors. These selectors help target specific elements based on their position within parent containers.
Last-child Selector in SASS
The :last-child selector targets the last child element within a parent container, regardless of the element type. It applies styles to the final element and all its nested children.
Syntax
.parent-element :last-child {
/* CSS properties */
}
Example 1: Basic Last-child Selection
This example demonstrates selecting the last child element within a container
<!DOCTYPE html>
<html>
<head>
<style>
.container :last-child {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Using the :last-child selector in SCSS</h2>
<div class="container">
<p>First paragraph</p>
<p>Second paragraph</p>
<div>Last child element (not a paragraph)</div>
</div>
</body>
</html>
The div element "Last child element (not a paragraph)" appears in red and bold text, as it is the last child within the container.
Example 2: Nested Elements
The :last-child selector also affects nested child elements within the last child
<!DOCTYPE html>
<html>
<head>
<style>
.parent :last-child {
font-size: 1.5rem;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Last-child with Nested Elements</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 third div and all its nested children display in green, larger text, and bold formatting.
Last-of-type Selector in SASS
The :last-of-type selector targets the last element of a specific type within a parent container. Unlike :last-child, it considers element types rather than position alone.
Syntax
element-type:last-of-type {
/* CSS properties */
}
Example 1: Last Paragraph Selection
This example selects the last paragraph element, even when it's not the last child
<!DOCTYPE html>
<html>
<head>
<style>
.multiple p:last-of-type {
color: blue;
font-size: 1.8rem;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Using the :last-of-type selector in SCSS</h2>
<div class="multiple">
<p>First paragraph</p>
<p>Second paragraph (last p element)</p>
<div>Last element (div, not paragraph)</div>
</div>
</body>
</html>
The second paragraph displays in blue, larger text, and bold formatting, even though the div element comes after it.
Example 2: Last List Item Selection
The :last-of-type selector works with any element type, including list items
<!DOCTYPE html>
<html>
<head>
<style>
.fruit-list li:last-of-type {
background-color: orange;
color: white;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Last-of-type with List Items</h2>
<div class="fruit-list">
<p>Fruit List:</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<p>End of list</p>
</div>
</body>
</html>
The "Orange" list item displays with an orange background, white text, padding, and rounded corners.
Conclusion
The :last-child selector targets the final child element regardless of type, while :last-of-type selects the last element of a specific type. Both selectors provide precise control over styling specific elements within parent containers in SASS.
4K+ Views
