jQuery :not() Selector

Last Updated : 11 Jul, 2025

The jQuery :not() selector is used to select all the elements which are not selected.

Syntax:

$(":not(selector)")

Parameter:

selector: Used to specify that the element is not to be selected. The selector parameter accepts any kind of selector.

Example 1: Change the background color of the p element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>jQuery :not() Selector</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).click(function () {
            $("p:not(.intro)").css(
                "background-color", "green");
        });
    </script>
</head>

<body>
    <center>
        <h1>Geeks for Geeks</h1>
        <p class="intro">
            A Computer Science Portal for Geeks
        </p>
        <p>jQuary :not selector</p>
        <p>I change my background color</p>
        <p>language option</p>
        <ul id="choose" style="width:5em;
                margin:0 auto;">
            <li>JAVA</li>
            <li>C++</li>
            <li>PYTHON</li>
        </ul>
        <button>Change color</button>
    </center>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE HTML>
<html>

<head>
    <title>jQuery :not() Selector</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>

<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
    <h2>jQuery | :not() Selector</h2>
    <p class="GFG-1" style="font-size: 15px; 
                            font-weight: bold;">
        GFG-1
    </p>
    <p class="GFG-2" style="font-size: 15px; 
                            font-weight: bold;">
        GFG-2
    </p>
    <p class="GFG-3" style="font-size: 15px; 
                            font-weight: bold;">
        GFG-3
    </p>
    <button id="button">
        Change content
    </button>
    <p class="GFG" style="color:green; 
                          font-size: 20px; 
                          font-weight: bold;">
    </p>
    <script>
        $("button").on('click', function () {
            $('p[class^="GFG-"]:not(.GFG-1)').text("new Content");
        });        
    </script>
</body>

</html>