How to filter the children of any element using jQuery ? Last Updated : 15 Nov, 2021 Comments Improve Suggest changes Like Article Like Report 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. 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:last-child") .css("text-decoration", "underline") .hover(function () { $(this).addClass("thisgreen"); }, function () { $(this).removeClass("thisgreen"); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to iterate through child elements of a div using jQuery ? V volumezero9786 Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to iterate through child elements of a div using jQuery ? jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element. To loop through the child elements, the jQuery each() method is used as demonstrated in the following e 3 min read How to iterate through child elements of a div using jQuery ? jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element. To loop through the child elements, the jQuery each() method is used as demonstrated in the following e 3 min read How to select elements with no visible children using jQuery ? In this article we are going to learn how to select elements whose property is not visible or hidden. It simply means that the display property of that particular element is hidden, and we need to show whatever present in that element using the Jquery.We can easily do this by using the Jquery:hidden 2 min read How to select all sibling elements of an element using jQuery ? In this article, we will discuss how to select all sibling elements of an element using jQuery. To select all sibling elements of an element, we will use the siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same 2 min read How to find all children with a specified class using jQuery ? There are lots of javascript libraries like - anime.js, screenfull.js, moment.js, etc. JQuery is also a part of javascript libraries. It is used to simplify the code. It is a lightweight and feature-rich library. In this article, we will learn how to find all children with a specified class of each 2 min read How to select direct parent element of an element in jQuery ? In this article, we will select the direct parent element of an element using jQuery. To select the direct parent element, the parent() method is used. This method finds the parent element related to the selected element. This parent() method traverses a single level up the selected element and retu 1 min read Like