How to select the 'last child' of a specific category using CSS?
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>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>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>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!
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Demystifying Screen Readers: Accessible Forms & Best Practices
Mar 08, 2025 am 09:45 AM
This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In
Create a JavaScript Contact Form With the Smart Forms Framework
Mar 07, 2025 am 11:33 AM
This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.
Adding Box Shadows to WordPress Blocks and Elements
Mar 09, 2025 pm 12:53 PM
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)
Mar 04, 2025 am 10:22 AM
This article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
What the Heck Are npm Commands?
Mar 15, 2025 am 11:36 AM
npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
