Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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>


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.




<!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>


Output:



Last Updated : 07 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads