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.
<!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:
<!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>
Output:
