jQuery :first-child Selector

Quiz

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

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

Syntax

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

$(":first-child")

Parameters

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

Example 1

In the following example, we are using the ":first-child" selector to select the first 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:first-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>

When we execute the above program, the first list item in each unordered lists will be highlighted with yellow background color.

Example 2

In this example, we are selecting the first 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:first-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 first table row in each table will be highlighted with yellow background color.

Example 3

Here, we are selecting the first <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(){
            $("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 first <p> element of all <div> elements will be highlighted with yellow background color.

jquery_ref_selectors.htm

Print Page