The jQuery :not selector selects all the elements which are not specified. It can be useful when you want to select all the items of a group element except the single one or multiple. After selecting the element, you can apply the CSS or any other effects to the element.
jQuery :not Selector Syntax
The syntax of the selector is given below.
It takes a single value as an argument which is a string. The description of the selector is given below.
Parameter Description
| Sr No | Parameter Name | Description |
|---|---|---|
| 1 | selector |
|
Let’s now understand the selector with the example given below.
jQuery :not Selector with Single Class Selection
A table contains many rows with a multiple numbers of cells to add content. If you want to highlight all the rows except the selected one, you can use the example given below. It selects only the single row of the table to remove from the selection and apply CSS color.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable tr:not(.tr-odditem)" ).css( "color", "orange" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; } </style> <p><button type="button" class="mybtn">Click Me to Color Rows</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Computer Accessories</th> <th>Quantity</th> </tr> <tr> <td>1</td> <td>Touchpad</td> <td>19</td> </tr> <tr> <td>2</td> <td>Mouse</td> <td>12</td> </tr> <tr class="tr-odditem"> <td>3</td> <td>Monitor</td> <td>23</td> </tr> <tr> <td>4</td> <td>Mouse Ball</td> <td>14</td> </tr> <tr> <td>5</td> <td>Mouse Scroller</td> <td>11</td> </tr> </table> |
Output
| Sr No | Computer Accessories | Quantity |
|---|---|---|
| 1 | Touchpad | 19 |
| 2 | Mouse | 12 |
| 3 | Monitor | 23 |
| 4 | Mouse Ball | 14 |
| 5 | Mouse Scroller | 11 |
The above example contains the table and the button element. You have to click the button given above to apply the ‘orange’ color to the rows. Only the specified row class is not selected for the text color.
Select Multiple Class of Element with the Selector
In addition to a single element select, the selector also allows you to select multiple elements comma-separated. You have to specify the element name, class name or id of the element to select. See the example given below to add multiple class names of the element.
The example contains the list elements element with computer accessories names.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $('.mylibtn').click(function(){ $( "ul.mylist li:not(.li-oddtwo,.li-oddsix)" ).css( "color", "red" ); }); }); </script> <button type="button" class="mylibtn">Click Me to Color List Items</button> <ul class="mylist"> <li>Printer</li> <li class="li-oddtwo">Keyboard</li> <li>Photocopy Machine</li> <li>Laser Printer</li> <li>Scanner</li> <li class="li-oddsix">Mouse</li> </ul> |
Output
- Printer
- Keyboard
- Photocopy Machine
- Laser Printer
- Scanner
- Mouse
The above example highlights the matching element when you click the button. It applies ‘red’ color the list items using the selector.