How to filter the children of any element using jQuery ?

Last Updated : 15 Nov, 2021

In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto of “Write less, do more.” It means that you can accomplish what you need by just writing a few lines of code.

Approach: We can achieve this task by just selecting appropriate selectors. For example, if we choose a first-child selector then only the first child will be highlighted and if we chose a last-child selector then the last child will be highlighted.

The child filter is divided into the following categories:

first-child Selector: This selector is used to select all elements that are the first child of their parent.
first-of-type Selector: This selector is used to select all elements that are the first among siblings of the same element name.
last-child Selector: This selector is used to select all elements that are the last child of their parent.
last-of-type Selector: This selector is used to select all elements that are the last among siblings of the same element name.
nth-child() Selector: This selector is used select all elements that are the nth-child of their parent.
nth-last-child() Selector: This selector is used select all elements that are the nth-child of their parent, counting from the last element to the first.
nth-last-of-type() Selector: This selector is used to select all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.
nth-of-type() Selector: This selector is used to select all elements that are the nth-child of their parent in relation to siblings with the same element name.
only-child Selector: This selector is used to select all elements that are the only child of their parent.
only-of-type Selector: This selector is used to select all elements that have no siblings with the same element name.

Example 1: In this example, we will use the first-child Selector to select the first child element of their parent.

HTML

<!doctype html>
<html lang="en">

<head>
    <style>
        span {
            color: black;
        }

        span.thisgreen {
            color: green;
            font-weight: bolder;
        }

        body {
            text-align: center;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
</head>

<body>
    <h1 style="color:green">GeeksForGeeks</h1>

    <div>
        <span>Database,</span>
        <span>OS,</span>
        <span>Computer Networks</span>
    </div>
    <div>
        <span>Windows,</span>
        <span>Linux,</span>
        <span>MacOS</span>
    </div>

    <script>
        $("div span:first-child")
            .css("text-decoration", "underline")
            .hover(function () {
                $(this).addClass("thisgreen");
            }, function () {
                $(this).removeClass("thisgreen");
            });
    </script>
</body>

</html>

Output:

Example 2: In this example, we will use the last-child Selector to select the last child element of their parent.