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:
<!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= <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> |
Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
.png)
