Open In App

jQuery :not() Selector

Improve
Improve
Like Article
Like
Save
Share
Report

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


Output:



Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads