How to select “last child” with a specific class using CSS ?

Last Updated : 08 May, 2023

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>