How to Select All Elements without a Given Class using jQuery?

Last Updated : 12 Jul, 2025

In jQuery, selecting elements that do not have a specific class can be useful when you want to manipulate or style all elements except those matching a certain condition. This approach allows for more precise control over the elements in various dynamic situations.

Here we have some common approaches to selecting all elements without a given class using jQuery:

Table of Content

Using :not(selector) Pseudo-Class
Using .not(selector) Method

1. Using :not(selector) Pseudo-Class

The :not(selector) pseudo-class in jQuery filters out elements that match a specific selector, such as a class, ID, or attribute. This method lets you apply actions only to elements that do not meet the given criteria.

Example 1: Highlight List Items Without the Class active

In this example, we use the :not() selector to target list items that do not have the class active and apply a yellow background.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to select all elements without
        a given class using jQuery ?
    </title>

    <meta charset="utf-8">

    <script src="https://code.jquery.com/jquery-1.10.2.js">
    </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:

2. Using .not(selector) Method

The .not(selector) method in jQuery excludes elements matching the specified selector from a set of selected elements. It allows you to dynamically filter out elements by class, ID, or other attributes, ensuring actions only affect the remaining elements.

Example 2: Change Border Color for <div> Elements Without a Specific Class or ID

This example demonstrates how to select all <div> elements that do not have the class green or the ID blue, and change their border color to red.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <script src="https://code.jquery.com/jquery-1.10.2.js">
    </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:

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

tanishqporwar22

Improve

Article Tags :

How to Select All Elements without a Given Class using jQuery?

1. Using :not(selector) Pseudo-Class

Example 1: Highlight List Items Without the Class active

2. Using .not(selector) Method

Example 2: Change Border Color for <div> Elements Without a Specific Class or ID

Similar Reads

Thank You!

What kind of Experience do you want to share?