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.
HTML
<!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.
HTML
<!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.
HTML
<!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:
Please Login to comment...