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:
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:
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.
Recommended Articles