How to select a div with a certain class using jQuery ?

27 Oct, 2021
Given a HTML document containing many div element with classes. Here the task is to select a div with a certain class, that doesn’t have another class. There are two approaches to solve this problem. In one of them, we will use a method and in the other one, we will use not selector. 
Approach 1: First, select the DIV with certain class using jQuery Selector and then use :not selector to ignore the elements of specific class. 
Example: This example implements the above approach.
html
<!DOCTYPE HTML><html> <head>    <title>        Select a div with a certain class,        that doesn't have another class.    </title>    <style>        body {            text-align: center;        }                 h1 {            color: green;        }                 .div {            background: green;            height: 50px;            width: 200px;            margin: 0 auto;            color: white;            border: 2px solid black;        }    </style>    <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head> <body>    <h1>        GeeksforGeeks    </h1>      <p>          Click on button to select a div with a certain        class, that doesn't have another class.    </p>         <!-- div elements -->    <div class="first div">        This is first Div    </div>    <br>    <div class="second div">        This is second Div    </div>    <br>    <div class="third div">        This is third Div    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <br>    <p id="geeks">    </p>      <script>                /* main function */        function GFG_Fun() {                       /* using the :not selector */            $('.div:not(.first)')            .css("background-color", "#173F5F");            $('#geeks')            .text("DIV Box of class 'first' is not selected.");        }    </script></body> </html>
Output:  
Approach 2: First, select the DIV with certain class using jQuery Selector and then Use .not() method to ignore the elements of specific class.
Example: This example implements the above approach.
html
<!DOCTYPE HTML><html> <head>    <title>        Select a div with a certain class,        that doesn't have another class.    </title>    <style>        body {            text-align: center;        }                 h1 {            color: green;        }                 .div {            background: green;            height: 50px;            width: 200px;            margin: 0 auto;            color: white;            border: 2px solid black;        }    </style>    <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head> <body>    <h1>        GeeksforGeeks    </h1>      <p>        Click on button to select a div with a certain        class, that doesn't have another class.    </p>       <!-- div elements -->    <div class="first div">        This is first Div    </div>    <br>    <div class="second div">        This is second Div    </div>    <br>    <div class="third div">        This is third Div    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <br>    <p id="geeks">    </p>      <script>                 /* main function */        function GFG_Fun() {                         /* using the .not() method */            $('.div').not('.first')            .css("background-color", "#173F5F");            $('#GFG_DOWN')            .text("DIV Box of class 'first' is not selected.");        }    </script></body> </html>                   
Output:
sweetyty
sagar0719kumar
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to get the value in an input text box using jQuery ?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
jQuery | parent() & parents() with Examples
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?