CSS | :not Selector
The :not(selector) selector is used to style every element that is not the specified by selector. Since it prevents specific items from being selected, it is also known as the negation pseudo-class.
Syntax:
:not(selector) {
//CSS Property
}
Example-1:
<!DOCTYPE html> <html> <head> <title> CSS :not selector </title> <style> p { color: #000000; } :not(p) { color: green; } </style> </head> <body style="text-align: center;"> <h1> CSS :not selector </h1> <p> A computer science portal for geeks. </p> <div> Geeks classes an extensive classroom programme. </div> </body> </html> |
chevron_right
filter_none
Output:
Example-2:
<!DOCTYPE html> <html> <head> <title> CSS :not selector </title> <style> /* Style everything but not one named .geek class */ li:not(.geek) { color: green; } </style> </head> <body style="text-align: center;"> <h1 style="color:green;"> CSS :not selector </h1> <p> Sorting Algorithms </p> <ul> <li>Merge sort</li> <li class="geek">Bubble sort</li> <li>Quick sort</li> </ul> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers: The browser supported by :not selector are listed below:
- Apple Safari 3.2
- Google Chrome 4.0
- Firefox 3.5
- Opera 9.6
- Internet Explorer 9.0
Recommended Posts:
- CSS | ::before selector
- CSS | ::after Selector
- CSS | * Selector
- CSS | #id Selector
- CSS | Class Selector
- CSS | ::first-letter Selector
- CSS | ::first-line Selector
- CSS | [attribute$=value] Selector
- CSS | :nth-last-child() Selector
- CSS | :nth-child() Selector
- CSS | :indeterminate Selector
- CSS | optional Selector
- CSS | :target Selector
- CSS | :first-of-type Selector
- CSS | :default Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
