Open In App

How to exclude particular class name from CSS selector ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 specific items from lists of selected items.

Syntax:

:not(Class_name) {
// CSS Property
}

Example 1: In this example, we are excluding the two list items of the given list.

html




<!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:

output

Example 2: In this example, we are excluding two rows of the table.

HTML




<!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;
        }
 
        /* The css will only applied on the
 element having class "myrow" */
        tr:not(.row12) {
            background-color: green;
            color: white;
        }
    </style>
</head>
 
<body>
    <div class="container">
 
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <hr />
 
        <table class="table">
            <thead>
                <tr class="row12">
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr class="row12">
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr class="myrow">
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr class="row12">
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>


Output:

table_bootsrap

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.



Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads