How to select "last child" with a specific class using CSS ?
In this article, we will learn to select the "last-child" with a specific class name in CSS. The last-child selector allows us to select the last element inside a set of siblings' elements within its defining element. the last-child selector is a pseudo-class that chooses the final member of the siblings in the block that contains it.
Approach: The CSS :last-child selector is used to target the last child element of its parent for styling.
Syntax:
:last-child {
// CSS property
}
Example 1: The following example shows an HTML div with four paragraphs. The first two paragraphs show a "grey" background-color and the last two paragraph shows a "yellow" background-color.
<!DOCTYPE html>
<html>
<head>
<style>
.greyClass {
background-color: grey;
}
.yellowClass {
background-color: yellow;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<b>Last child </b>
<div id="divID">
<p class="greyClass">
This paragraph 1 is within
greyClass class.
</p>
<p class="greyClass">
This paragraph 2 is within
greyClass class.
</p>
<p class="yellowClass">
This paragraph 3 is within
yellowClass class.
</p>
<p class="yellowClass">
This paragraph 4 is last child
and within yellowClass class
</p>
</div>
</body>
</html>
Output:
Example 2: The following code shows selecting the last child with a specific class. Refer to the output which shows the last child with a "blue" color instead of having the color of "yellowClass" class.
<!DOCTYPE html>
<html>
<head>
<style>
.greyClass {
background-color: grey;
}
.yellowClass {
background-color: yellow;
}
.yellowClass:last-child {
background-color: blue;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<b>Last child with class name</b>
<div id="divID">
<p class="greyClass">
This paragraph 1 is within
greyClass class.
</p>
<p class="greyClass">
This paragraph 2 is within
greyClass class.
</p>
<p class="yellowClass">
This paragraph 3 is within
yellowClass class.
</p>
<p class="yellowClass"> T
his paragraph 4 is last child
and within yellowClass class
</p>
</div>
</body>
</html>
Output:
Example 3: The following code shows another way of selecting the last child of the HTML div.
<!DOCTYPE html>
<html>
<head>
<style>
.greyClass {
background-color: grey;
}
.yellowClass {
background-color: yellow;
}
#paraID.yellowClass:last-child {
background-color: blue;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<b>Last child with class name</b>
<div id="divID">
<div id="greyDiv">
<p class="greyClass">
This paragraph 1 is within
greyClass class.
</p>
<p class="greyClass">
This paragraph 2 is within
greyClass class.
</p>
</div>
<div id="yellowDiv">
<p class="yellowClass">
This paragraph 3 is within
yellowClass class.
</p>
<p id="paraID" class="yellowClass">
This paragraph 4 is last child
and within yellowClass class.
</p>
</div>
</div>
</body>
</html>
Output:
