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
Last Updated :
07 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...