jQuery :last-child Selector

Quiz

The :last-child selector in jQuery is used to select the last child element within its parent. This selector is commonly used to apply styles or perform actions on the last child element of a parent. This selector works with all HTML elements.

If we want to select the first child of their parent, we need to use the :first-child selector.

Syntax

Following is the syntax of :last-child selector in jQuery −

$(":last-child")

Parameters

The :last-child selects the last child element of the specified parent.

Example 1

In the following example, we are using the ":last-child" selector to select the last list item in each unordered list −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("ul li:last-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <ul>
        <li>First item in second list</li>
        <li>Second item in second list</li>
    </ul>
</body>
</html>

After executing the above program, the last list item in each unordered lists will be highlighted with yellow background color.

Example 2

In this example, we are selecting the last table row in each table −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("table tr:last-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>First row, first cell</td>
            <td>First row, second cell</td>
        </tr>
        <tr>
            <td>Second row, first cell</td>
            <td>Second row, second cell</td>
        </tr>
    </table>
    <br><br>
    <table border="1">
        <tr>
            <td>First row, first cell in second table</td>
            <td>First row, second cell in second table</td>
        </tr>
        <tr>
            <td>Second row, first cell in second table</td>
            <td>Second row, second cell in second table</td>
        </tr>
    </table>
</body>
</html>

When we execute the above program, the last table row in each table will be highlighted with yellow background color.

Example 3

Here, we are selecting the last <p> element of all <div> elements −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Apply an italic font style to the first <p> child of each <div>
            $("div p:first-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div style="border: 1px solid black;">
        <p>First paragraph in first div</p>
        <p>Second paragraph in first div</p>
    </div>
    <br>
    <div style="border: 1px solid black;">
        <p>First paragraph in second div</p>
        <p>Second paragraph in second div</p>
    </div>
</body>
</html>

After executing the above program, the last <p> element of all <div> elements will be highlighted with yellow background color.

jquery_ref_selectors.htm

Print Page