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

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 =
        </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 elemnets -->
        <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 slector */
                $('.div:not(.first)')
                .css("background-color", "#173F5F");
                $('#geeks')
                .text("DIV Box of class 'first' is not selected.");
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 =
        </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 elemnets -->
        <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>                    

    chevron_right

    
    

  • Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.