How to select all elements without a given class using jQuery ?

All elements that do not match the given selector can be selected using jQuery( “:not(selector)” ). For example, the first example selects all the <li> elements which are not active.

Example 1: This example selects <li> elements which does not contains the class active.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to select all elements without
        a given class using jQuery ?
    </title>
      
    <meta charset="utf-8">
      
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
      
    <b>
        Select all elements without a<br>
        given class using jQuery
    </b>
      
    <ul>
        <li class="active">element 1</li>
        <li>element 2</li>
        <li>element 3</li>
        <li>element 4</li>
    </ul>
      
    <script>
        $("li:not(.active)").css(
                "background-color", "yellow" );
    </script>
</body>
  
</html>

chevron_right


Output:



It can also be done using .not(selector).

Example 2: This example selects <div> elements which does not contains the class green or id blue.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
      
    <script src=
    </script>
      
    <style>
        div {
            width: 50px;
            height: 50px;
            margin: 10px;
            float: left;
            border: 2px solid black;
        }
        .green {
            background: #8f8;
        }
        .orange {
            background: orange;
        }
        #blue {
            background: #99f;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
      
    <b>
        Select all elements without a
        given class using jQuery
    </b>
    <br><br>
  
    <div></div>
    <div id="blue"></div>
    <div></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="orange"></div>
    <div></div>
      
    <script>
        $("div").not(".green, #blue")
            .css("border-color", "red");
    </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.