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

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>

Output:

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

V

vkash8574

Improve

Article Tags :

Similar Reads

How to apply CSS in even childs of parent node using jQuery ?

In this article, we will see how to set styles in even the child of the parent element using jQuery. To set the style on the even child of the parent, we use jQuery :nth-child(even) selector. The :nth-child(even) selector is used to select every element that is the even child of its parent element.

How to apply CSS in odd childs of parent node using jQuery ?

In this article, we will see how to set styles in the odd child of the parent element using jQuery. To set the style on the odd child of the parent, we use jQuery :nth-child(odd) selector. The :nth-child(odd) selector is used to select every element that is the odd child of its parent element. Synta

How to apply CSS style using jQuery ?

In this article, we will explore how we can apply CSS styles to HTML elements. It is recommended that you have some basic knowledge of HTML, CSS, JavaScript, and jQuery before beginning this article. It is possible to change the CSS property of an element by using a simple JavaScript API, but we try

How to apply css property to a child element using JQuery?

The task is to apply CSS property to a child element using jQuery. To do that, first we select the child element with the help of children() method in jQuery and then apply CSS property to it with the help of css() method in jQuery. Syntax: // Note : children method selects the direct child to paren

How to add a class to the last paragraph element using jQuery ?

In this article, we will learn to add a class to the last paragraph element using jQuery. To add a class to the last paragraph element, we use last() and addClass() methods. The jQuery last() function is an inbuilt function that is used to find the last element of the specified elements. Syntax: $(s