How to apply CSS in last child of parent using jQuery ?

Last Updated : 05 Jun, 2023

In this article, we will see how to set styles in the last child of the parent element using jQuery. To set the style on the last child of parent, we use jQuery :last-child selector.

The :last-child selector is used to select every element that is the last child of its parent element.

Syntax:

$("Selector:last-child")

Approach: First, we create an HTML element containing a div element. This div element contains some paragraph elements, then we use :last-child selector to select the last paragraph of the parent element.

Example: In this example, we will apply CSS in the last child of a parent using jQuery.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        div {
            font-size: 18px;
            font-weight: bold;
        }        
        p {
            margin-left: 50px;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("p:last-child").css({
                backgroundColor: "green",
                color: "white",
                padding: "5px 15px",
                display: "table"
            });
        });
    </script>
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>
        How to apply CSS in last child of 
        parent using jQuery library?
    </h3>
    <div>
        <span>GeeksforGeeks Courses:</span>
        <p>Data Structure</p>
        <p>C++ Programming</p>
        <p>javaScript</p>
        <p>Web Technology</p>
    </div>
</body>
</html>