CSS or Cascading Style Sheets is an important part of modern web development, allowing web developers to add styles to their websites and create visually appealing designs. Sometimes we want to select the last child element of a specific class using CSS, but how to achieve this? There are different ways to select the last child element.
In this article, we will see how to select the last child element with a specific class using CSS.
Method 1 using:last-child() selector:
:The last-child() selector method is the first method available in CSS. This selector is used to select the last child element of its parent element. The process of selecting the last child element is very simple. To select the last child element with a specific class, we use the :last-child selector in combination with the class selector.
Check out the syntax below to learn how to use the last-child selector to select the last element.
grammar
In this syntax, let's say we have a list of items with class name "item" and we want to style the last item in the list differently, in order to do this 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 the "item" class and apply the specified style to it.
Example
In this example, we use the :last-child() selector to select the last div element with the class name "item" and add CSS styles to it, such as background color green and padding 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 id="Method-Using-the-last-child-Selector">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>
Method 2: Use :nth-last-child() selector
This is the second way to select the last child element with a specific class in CSS. The :nth-last-child selector is used to select elements based on their position relative to the end of the parent element.
The work of this selector is very simple. To select the last child of a specific class with the help of :nth-last-child selector, we have to combine it with the class selector and set the value to 1. See the following syntax for more details on how nth-last is used - the child selector is used to select the last element.
grammar
In this syntax, assuming we have a series of div elements with the class name "div-box", and now to style the last div element in this 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 the class name "div-box" and apply the specified style to it.
Example
The above syntax will select the last child element with the class name "div-box" and apply the specified style 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 id="Method-Using-the-nth-last-child-Selector">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>
How to use JavaScript
In this approach we use JavaScript to select the last child with a specific class. While CSS is the preferred method for styling web pages, JavaScript on the other hand can also be used to perform Document Object Model operations and dynamically select HTML elements.
In JavaScript, the querySelector() method is used with the class selector and the :last-child selector to select the last child with a specific class.
The process of selecting the last child using JavaScript is also very simple. To select the last child of a specific class with the help of javascript, we have to combine it with the :last-child-selector of the class and CSS. See the following syntax for more details on how to select the last element using javascript.
grammar
In this syntax, we have a series of div elements with "div" class, and we want to add "add-color" class 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 the "div" class and add the "add-color" class to it.
Example
In this example, we define a list of div elements with the class name "item", and then we also add some CSS styles. Now to select the last child element we define a class called "highlight" and twitch will style the last div element.
Here, we use the querySelector() method in JavaScript, which selects the last child element with "class" as "item". Then, we also added the "highlight" class to the selected element using 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 id="Method-Using-JavaScript">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>
in conclusion
Selecting the last child element with a specific class using CSS is a task that can be achieved in different ways. The :last-child() selector and the :nth-last-child() selector are two methods that can be used to accomplish this task.
:The last-child() selector is used to select the last child element of its parent element. To select the last child element with a specific class, we use the :last-child selector in conjunction with the class selector. On the other hand, the :nth-last-child() selector is used to select elements based on their position relative to the end of the parent element. To select the last child element of a specific class using the :nth-last-child selector, we have to combine it with the class selector and set the value to 1.
In summary, both methods are effective for selecting the last child element with a specific class, and which method 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 to make them more attractive to users.
The above is the detailed content of How to select the 'last child' of a specific category using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo
CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PMCSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust
Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AMUsing scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Revisiting Image MapsMay 07, 2025 am 09:40 AMLet’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AMThe State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Zend Studio 13.0.1
Powerful PHP integrated development environment
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
