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
How to select “last child” with a specific class using CSS?
CSS or cascading style sheet is an essential part of modern web development, as it allows web developers to style their websites and create visually appealing designs. There are times when we want to select the last child of a specific class using CSS, but how? There are different approaches that can be used to select the last child.
In this article, we will see how to select the last child with a specific class in CSS.
Approach 1: Using :last-child() Selector
The :last-child() selector method is the first method available in CSS. This selector is used in selecting the last child element of its parent element. The process of selecting the last children is very easy. To select the last child with a specific class, we combine the :last-child selector with a class selector.
See the below syntax for more detail on how last-child selector is used to selecting the last element.
Syntax
In this syntax, assume we have a list of items with a class of "item" and we want to style the last item in the list differently, to do that, we can use the following CSS code −
.item:last-child {
/* Add your CSS styles here */
}
The above syntax will select the last child element with a class of "item" and apply the specified styles to it.
Example
In this example, we have used the :last-child() selector that select the last div elemen having the class name as “item” and adds the CSS styles to it like background color to green, and padding to 10px.
<html>
<head>
<title>Program to select the last child using :last-child() selector</title>
<style>
/* Using the :last-child Selector */
.item:last-child {
background-color: green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Method: Using the :last-child Selector</h2>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth or Last Item</div>
</body>
</html>
Approach 2: Using :nth-last-child() Selector
This is the second method for selecting the last child with a specific class in CSS. The :nth-last-child selector is used in selecting the elements based on their position relative to the end of the parent element.
The working of this selector is very easy. To select the last child of a specific class with the help of the :nth-last-child selector, we have to combine it with a class selector and set the value to 1. See the below syntax for more detail on how nth-last-child selector is used to select the last element.
Syntax
In this syntax, assume we have a series of div elements with a class of "div-box" and now to style the last div element in the series we can use the following CSS code −
.div-box:nth-last-child(1) {
/* Add your CSS styles here */
}
The above syntax will select the last child element with a class of "div-box" and apply the specified styles to it.
Example
The above syntax will select the last child element with a class of "div-box" and apply the specified styles to it.
<html>
<head>
<title>Program to select the last child using :nth-last-child() selector</title>
<style>
/* Using the :last-child Selector */
.item:nth-last-child(1) {
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<h2>Method: Using the :nth-last-child Selector</h2>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth or Last Item</div>
</body>
</html>
Approach 3: Using JavaScript
In this approach, we are using JavaScript to select the last child with a specific class. CSS is the preferred approach for styling the web pages, on the other hand JavaScript can also be used to perform the Document Object Model operations and select the HTML elements dynamically.
In JavaScript, the querySelector() method is used with a combination of the class and :last-child selectors to select the last children with a specific class.
The process to select last child using javascript is also easy. To select the last child of a specific class with the help of the javascript, we have to combine it with a class and :last-child-selector of CSS. See the below syntax for more detail on how javascript is used to select the last element.
Syntax
In this syntax, we have a series of div elements with a class of "div" and we want to add a class of "add-color" to the last div in the list, we can use the following JavaScript code −
ar lastDiv = document.querySelector('.div:last-child');
lastDiv.classList.add(add-color);
The above syntax will select the last child element with a class of "div" and add the “add-color” class to it.
Example
In this example, we have defined a list of div elements having its class name as “item” and after which we have also added some CSS styles. Now to select the last child, we have defined a class called "highlight" twitch will style the last div element.
Here we have used the querySelector() method from JavaScript that selects the last child element with a class of "item". After which we have also added the "highlight" class to the selected element with the help of the classList.add() method.
<html>
<head>
<title>Program to select the last child using JavaScript</title>
<style>
/* Styling for divs */
.item {
background-color: #f1f1f1;
padding: 10px;
margin-bottom: 10px;
}
/* Styling for last div */
.highlight { background-color: yellow;}
</style>
</head>
<body>
<h2>Method: Using JavaScript</h2>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth or Last Item</div>
<script>
// Selecting the last div element with class "item"
var lastDiv = document.querySelector('.item:last-child');
// Adding the "highlight" class to the last div element to change its background color
lastDiv.classList.add('highlight');
</script>
</body>
</html>
Conclusion
Selecting the last child with a specific class in CSS is a task that can be achieved using different approaches. The: last-child() selector and :nth-last-child() selector are two methods that can be used to achieve this task.
The :last-child() selector is used to select the last child element of its parent element. To select the last child with a specific class, we combine the :last-child selector with a class selector. On the other hand, the :nth-last-child() selector is used in selecting the elements based on their position relative to the end of the parent element. To select the last child of a specific class with the help of the :nth-last-child selector, we have to combine it with a class selector and set the value to 1.
In conclusion, both approaches are effective in selecting the last child element with a specific class, and the approach to use depends on the specific needs of the web developer. By using these selectors, web developers can enhance the appearance and functionality of their websites, making them more appealing to users.
4K+ Views
