CSS :not Selector
The :not(selector) selector is used to style every element that is not specified by the given selector. Known as the negation pseudo-class, it allows developers to exclude specific items from being selected.
Syntax:
:not(selector) {
//CSS Property
}
Usage Examples
Example 1
This example demonstrates the usage of the :not selector to style all elements except paragraphs (<p>).
<!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 Beginner.
</p>
<div>
Beginner classes an extensive classroom programme.
</div>
</body>
</html>
Output:
Example 2
This example demonstrates styling all list items (<li>) except those with the class .geek.
<!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:
The CSS :not selector is used for excluding specific elements from a selection, allowing for more refined and targeted styling. By leveraging this pseudo-class, developers can create sophisticated stylesheets that apply rules conditionally. This selector is widely supported across all major browsers, making it a reliable choice for modern web development.
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
Contact Us