How to exclude particular class name from CSS selector ?

In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.

Syntax:

:not(element) {
    // CSS Property
}

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>
        How to exclude particular class
        name from CSS selector ?
    </title> 
      
    <meta charset="utf-8"> 
    <meta name="viewport" content=
            "width=device-width, initial-scale=1"> 
      
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
      
    <style> 
        h1, h3 {
            text-align: center; 
        }
        .todo {
            color: gray;
        }
          
        /* Style to all li element except todo class name */
        li:not(.todo) {
            text-decoration: line-through;
            color: green;
        }
    </style> 
</head> 
  
<body> 
    <div class="container"> 
          
        <h1 class="text-success">
            GeeksforGeeks
        </h1> 
        <hr/> 
          
        <h3>To-Do List:</h3>
          
        <ul class="list-group">
            <li class="list-group-item">
                Complete The Online Course
            </li> 
              
            <li class="list-group-item">
                Goto Kolkata On Wednesday
            </li>
              
            <li class="todo list-group-item">
                Write Another Article For GeeksforGeeks
            </li>
              
            <li class="todo list-group-item">
                Complete Java Assignment
            </li>
              
            <li class="todo list-group-item">
                Buy Books On JavaScript
            </li>     
        </ul>
    </div> 
</body> 
  
</html>

chevron_right






                        filter_none








Output:

output



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
shubhamr238
Check out this Author's contributed articles.
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.