Open In App
Related Articles

CSS :not Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

 notselector 

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:

 notselector 

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
Previous
Next
Share your thoughts in the comments
Similar Reads