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:
html
<!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> |
Output:
Example-2:
html
<!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> |
Output:
Supported Browsers: The browser supported by :not selector are listed below:
- Apple Safari 3.1 and above
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Firefox 1.0 and above
- Opera 9.5 and above
- Internet Explorer 9.0 and above
Please Login to comment...