Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 21 Sep, 2021

In this article, we will see how to set styles in last child of parent element using jQuery. To set the style on 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

$("Selector:last-child")

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



Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!