jquery :not() Selector Examples

The jQuery not selector performs the opposite of what we generally to do find out if an element contains a specific value. In other words, it selects all elements that do not match the given selector. That said, let’s take a look at how to use it in real time by means of easy examples.

How to use the jQuery not selector

So for the sake of examples, let’s assume that we have different elements on a web page, such as divs, paragraphs, list items, table, checkboxes. We will see how to apply the :not() selector in various cases.

Common HTML Source code for all the following examples:

<style type="text/css">
.existing_yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.existing_purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
	font-style: italic;		
}
.orange {	
	border: 2px solid #F90;
	font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

<div class="divs_container">

<p>  
    <input name="subscribe" type="checkbox" id="subscribe_0" value="Email" checked="CHECKED">
   <label for="subscribe_0">Email</label>
  <br>
  <label>
    <input type="checkbox" name="subscribe" value="Newsletter" id="subscribe_1">
   <label for="subscribe_1">Newsletter</label>
  <br>
  <label>
    <input type="checkbox" name="subscribe" value="RSS" id="subscribe_2">
   <label for="subscribe_2">RSS</label>
  <br>
</p>

<div id="my_div1">This is MY DIV 1

    <div id="my_div2" class="existing_yellow red_text green">This is MY DIV 2</div>

    </div>

  <div id="my_div3" class="existing_purple green">This is MY DIV 3</div>    

    <div id="my_div4" class="existing_yellow">This is MY DIV 4</div>    

	<p>This is a PARA</p>    

  <ul>
    <li>High List item 1</li>
    <li>List item 2</li>
    <li>High List item 3</li>
    <li>List item 4</li>
    <li>High List item 5</li>
  	</ul>

  <table width="100%" border="1" cellspacing="1" cellpadding="1">
      <tr>
        <td>R1C1</td>
        <td></td>
        <td>R1C3</td>
        <td>R1C4</td>
      </tr>
      <tr>
        <td>R2C1</td>
        <td>R2C2</td>
        <td>R2C3</td>
        <td>R2C4</td>
      </tr>
      <tr>
        <td>R3C1</td>
        <td>R3C2</td>
        <td></td>
        <td>R3C4</td>
      </tr>
      <tr>
        <td>R4C1</td>
        <td>R4C2</td>
        <td>R4C3</td>
        <td></td>
      </tr>
  </table>

<br>

  <div id="hidden_div" class="existing_yellow" style="visibility: hidden;">This is a hidden Div</div>

<div id="paras_container" class="existing_purple">
  	<p>This is para 1</p>
  	<p>This is para 2</p>
  	<p>This is para 3</p>
  	<p>This is para 4</p>            
  </div>

</div>

<p>	

<input type="submit" name="sbt_sel_not_checked_checkboxes" id="sbt_sel_not_checked_checkboxes" value="Highlight Checkboxes that were not checked">

<input type="submit" name="sbt_disable_checkboxes" id="sbt_disable_checkboxes" value="Disable all Unchecked Checkboxes">

<input type="submit" name="sbt_alert_div_ids" id="sbt_alert_div_ids" value="Alert Div IDs that do not have GREEN class">

<input type="submit" name="sbt_list_item" id="sbt_list_item" value="Add GREEN class to all list items that do NOT have the word 'High' in their text">

<input type="submit" name="sbt_table_cells" id="sbt_table_cells" value="Add GREEN class to all Table cells that are NOT empty">

<input type="submit" name="sbt_header_not_found" id="sbt_header_not_found" value="Check for Header tags and alert result">

<input type="submit" name="sbt_para_not_found" id="sbt_para_not_found" value="Check for PARAGRAPH tags and alert result">

<input type="submit" name="sbt_div_visible" id="sbt_div_visible" value="Make a DIV visible if it is not visible">

<input type="submit" name="sbt_para_not_first" id="sbt_para_not_first" value="Add Orange Class to paragraphs that are NOT the first child in a DIV">

<input type="submit" name="sbt_para_not_last" id="sbt_para_not_last" value="Add Red Class to paragraphs that are NOT the last child in a DIV">

</p>

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//Add jQuery code here

});	

</script>

Example 1: Add GREEN class to labels of all checkboxes that are not checked when a button is clicked

	$('#sbt_sel_not_checked_checkboxes').on("click", function(e){						

		$("input[name='subscribe']:not(:checked) + label").addClass('green');

		e.preventDefault();

	});

Example 2: Disable all checkboxes that are not checked when a button is clicked

	$('#sbt_disable_checkboxes').on("click", function(e){		

		$("input[name='subscribe']:not(:checked)").prop("disabled", "disabled");

		e.preventDefault();

	});

Example 3: If any divs do not have the green class applied to them, then alert their ID when a button is clicked

	$('#sbt_alert_div_ids').on("click", function(e){				

		$('.divs_container div:not(".green")').each(function(index) {
		    alert( $(this).attr('id') );
		});	

		e.preventDefault();

	});

Example 4: If the list item does not contain the word ‘High’, add green class to such items

	$('#sbt_list_item').on("click", function(e){				

		$('.divs_container ul li:not(:contains("High")').addClass('green');

		e.preventDefault();

	});

Example 5: Add GREEN Class to all table cells that do not contain any data in them

	$('#sbt_table_cells').on("click", function(e){				

		$(".divs_container table td:not(:empty)").addClass('green');

		e.preventDefault();

	});

Example 6:  If no header tags are found, alert the same

	$('#sbt_header_not_found').on("click", function(e){				

		if( $(".divs_container :header").length === 0 )
		{
			alert('No Heading tags available');	
		}
		else
		{
			alert('Heading tags available');		
		}

		e.preventDefault();

	});

Example 7: If no paragraph tags are found, alert the same

	$('#sbt_para_not_found').on("click", function(e){				

		if( $(".divs_container p").length === 0 )
		{
			alert('No Paragraph tags available');	
		}
		else
		{
			alert('Paragraph tags available');		
		}

		e.preventDefault();

	});

Example 8: If DIV is not visible (hidden), then make it visible

	$('#sbt_div_visible').on("click", function(e){				

		if( $("#hidden_div:not(:visible)") )
		{			
			$("#hidden_div").css('visibility', 'visible');
		}
		else
		{
			alert('Hidden Div is Visisble.');		
		}

		e.preventDefault();

	});

Example 9: Add ORANGE class to all paragraphs that are not the first child in a Div

	$('#sbt_para_not_first').on("click", function(e){				

		$("#paras_container p:not(':first')").addClass('orange');		

		e.preventDefault();

	});

Example 10: Add RED_TEXT class to all paragraphs that are not the last child in a Div

	$('#sbt_para_not_last').on("click", function(e){				

		$("#paras_container p:not(':last')").addClass('red_text');		

		e.preventDefault();

	});

Your Turn!

Do you know of any other ways to use the jQuery :not() selector? Feel free to suggest by commenting below.