not()
CSS :not() Pseudo Class
The :not() pseudo-class represents elements that do not match a list of selectors.
It is also known as the negation pseudo-class. It is a functional pseudo-class selector that takes a simple selector as an argument and matches with one or more elements not being represented by the argument.
The :not() selector takes as an argument any of the following:
Type selector (e.g p, span, etc.)
Class selector (e.g .element etc.)
ID selector (e.g #header)
Pseudo-class selector (e.g :last-child, :first-of-type)
Attribute selector (e.g [type=“text”])
The universal selector (*)
Important Notes
Important Notes
The :not selector does not work with pseudo selectors attached to the different elements which are doing pseudo selection.
Useless selectors can be written with the :not selector.
The :not selector can increase the specificity of a rule.
The:not(.foo) matches anything that isn’t .foo, (including <html> and <body>).
The :not selector only applies to one element.
If you use the :not() without applying it to just one element, it will select all elements in a document that are not represented in the argument.
Version
Version
Selectors Level 3
Selectors Level 4
Syntax
Syntax
:not() {
css declarations;
}
Example of the :not() pseudo-class:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #666;
}
:not(p) {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:not() selector example</h2>
<p>Lorem Ipsum is simply dummy text</p>
<p>Lorem Ipsum is simply dummy text</p>
<div>Lorem Ipsum is simply dummy text</div>
<a href="https://www.w3cdoc.com" target="_blank">Link to w3cdoc</a>
</body>
</html>
In the following example, there is an unordered list with a single class on the <li> tag.
Example of the :not() pseudo-class with the <li> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text-blue {
color: blue;
}
ul li:not(.text-blue) {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:not() selector example</h2>
<ul>
<li>List item 1</li>
<li class="text-blue">List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>