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
How to select “last child” with a specific class using CSS?
To select the last child with a specific class using CSS is a simple process using CSS pseudo-class selectors. In this article, we will explore three different approaches to target the last element with a specific class.
Syntax
/* Using :last-child */
.class-name:last-child {
property: value;
}
/* Using :nth-last-child() */
.class-name:nth-last-child(1) {
property: value;
}
/* Using :last-of-type */
.class-name:last-of-type {
property: value;
}
Method 1: Using :last-child Selector
The CSS :last-child pseudo-class selector targets the last element inside its parent element. This method works when the last child element has the desired class
<!DOCTYPE html>
<html>
<head>
<style>
.item {
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.item:last-child {
background-color: #04af2f;
color: white;
}
</style>
</head>
<body>
<h3>Selecting Last Child with :last-child</h3>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Last Item</div>
</body>
</html>
Four div elements appear, with the last one highlighted in green with white text while others remain in light gray.
Method 2: Using :nth-last-child() Selector
The :nth-last-child() pseudo-class selector targets elements based on their position from the end. Using nth-last-child(1) selects the first element from the end (last element)
<!DOCTYPE html>
<html>
<head>
<style>
.item {
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.item:nth-last-child(1) {
background-color: #04af2f;
color: white;
}
</style>
</head>
<body>
<h3>Selecting Last Child with :nth-last-child()</h3>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Last Item</div>
</body>
</html>
Four div elements appear, with the last one highlighted in green with white text while others remain in light gray.
Method 3: Using :last-of-type Selector
The :last-of-type pseudo-class selector targets the last element of its type within its parent container. This works well when all elements with the class are of the same type
<!DOCTYPE html>
<html>
<head>
<style>
.item {
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.item:last-of-type {
background-color: #04af2f;
color: white;
}
</style>
</head>
<body>
<h3>Selecting Last Child with :last-of-type</h3>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Last Item</div>
</body>
</html>
Four div elements appear, with the last one highlighted in green with white text while others remain in light gray.
Key Differences
| Selector | Behavior | Best Used When |
|---|---|---|
:last-child |
Selects the last child element | The last element has your target class |
:nth-last-child(1) |
Selects the first element from the end | More specific positioning is needed |
:last-of-type |
Selects the last element of its type | Targeting elements by their HTML tag type |
Conclusion
All three methods effectively select the last child with a specific class. Choose :last-child for general use, :nth-last-child() for specific positioning, and :last-of-type when targeting by element type.
8K+ Views
