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¶
- 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¶
Selectors Level 3
Selectors Level 4
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.web.com" target="_blank">Link to Web</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>
 Pseudo Class){kind=link}
0 Comments
CAN FEEDBACK
Emoji