How to find all children with a specified class using jQuery ?

29 Nov, 2021
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 division. 
.children(selector) – In jquery you can achieve this task by using the method named .children(). It takes the selector as a parameter and changes the children element with the specified name. 
Example 1:
HTML
<!DOCTYPE html><html> <head>    <script src="https://code.jquery.com/jquery-git.js">    </script>     <style>        body {            font-size: 20px;            font-style: italic;            background-color: green;            text-align: center;        }    </style></head> <body>    <div>        <h1 class="child">            GeeksForGeeks        </h1>         <span>            This is a span in div element.            (children but not specified)        </span>         <p class="child">            This is a paragraph with specified            class in a div element.        </p>          <div class="child">            This is inner div with specified            class in a div element.        </div>          <p>            This is another paragraph in div            element.(children but not specified)        </p>     </div>     <script>        $("div").children(".child").css({            "background-color": "lightgreen",            "border-style": "inset"        });    </script></body> </html>
Output:
Explanation: The div element has 5 children ( 1 heading, 1 span, 1 inner div, and 3 paragraphs). In the code, we have specified three-element with class=”child” i.e. two paragraphs and one div. You can notice that only specified elements get affected and change their style property.
Example 2:
HTML
<!DOCTYPE html><html> <head>    <script src="https://code.jquery.com/jquery-git.js">    </script>         <style>        body {            font-size: 20px;            font-style: italic;            background-color: green;            text-align: center;        }    </style></head> <body>    <div>        <h1>GeeksForGeeks</h1>          <p>            class with prime will only            get different style property        </p>           <p>'1' is not a prime number.</p>          <p class="prime">'2' is a prime number.</p>          <div class="prime">'3' is a prime number.</div>          <p>'4' is not a prime number.</p>          <p class="prime">'5' is a prime number</p>     </div>         <script>        $("div").children(".prime").css({            "background-color": "lightgreen",            "border-style": "inset"        });    </script></body> </html>
Output – 
surindertarika1234
CSS-Questions
HTML-Property
HTML-Questions
HTML-Tags
jQuery-Methods
jQuery-Questions
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)