The :not is a pseudo-class negation selector which is used to prevent specific elements from being selected.
For example, if you use :not(p) selector, it will select every element on the page except the paragraphs. Similarly, the :not(div) selector will select every element except the divs.
The following example selects every element on the page except the paragraphs and set their font color to red:
Example:
:not(p){ /* Select every element except paragraphs */
color: red;
}
p{
color: blue; /* Explicitly set the paragraphs font color */
}
The above example looks pretty simple but actually, it is not. Because it is selecting every single element on the page except the paragraphs. It means the <html>, <body>, <head> and all these elements are also being selected and we were totally unaware of it.
To prove that we are right, try out the following example where the :not selector sets a border around each element except the paragraphs:
Example:
:not(p){
border: 1px solid red;
}
From the above example, you might have definitely got the idea of why did we explicitly set the paragraphs font color in the first example.
Because if we don’t do it explicitly, the paragraphs will inherit the font color from their parent which is the <body> tag itself. And as we have already seen the <body> tag is also being selected and has a red font color.
Therefore, all the paragraphs will also have a red font color despite the fact that we have used :not(p) selector.
See this example:
Example:
:not(p){
color: red;
}
One common approach to avoid the above problem is to add a class to those elements which you want to prevent from being selected.
However, only adding the class will not resolve the problem, you have to specify the type of the elements just before the :not selector whom you want to put in the selected category.
The :not selector in the following example selects only those paragraphs which do not have the class .different:
Example:
p:not(.different){
background: yellow;
padding: 5px;
}
Here is one more example with lists that selects every list item except the ones which have the .car class.
Example:
li:not(.car){
color: red;
}
Just like the class, you can also specify the id of the element in the :not() selector to prevent it from being selected.
The following example selects every paragraph except the one that has an id #different:
Example:
p:not(#different){
background: yellow;
padding: 5px;
}
Just like the classes and ids, a pseudo-class can also be passed to the :not() selector as an argument.
In the following example, we have passed the :nth-child() pseudo class to the :not() selector. This will select every paragraph of its parent element except the third one:
Example:
p:not(:nth-child(3)){
background: yellow;
padding: 5px;
border: 1px solid red;
}
Allowed Arguments
The :not() selector can take any of the following as an argument:
- Type selector such as div, p, span, li, etc.
- Class selector such as .different, .main, .navigation, etc.
- Id selector such as #para, #header, #footer, etc
- Pseudo-class selectors such as :first-child, :last-child, :nth-child, etc.
- Attribute selectors such as [type=”text”], [href=”#”], etc.
- Universal selector(*)
And here is what is not allowed:
- Pseudo-element selectors such as ::before, ::after, etc.
- Another :not selectors
As per the above two points, we can clearly say that the following are the invalid syntax of the :not selector:
/* INVALID */
p:not(:not(.different)) {}
p:not(:not(:first-child)) {}
:not(::before) {}
a:not(::first-line) {}
CSS Syntax
The syntax of the :not() selector is as follows:
:not(selector){
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the :not() selector.
| Selector | |||||
| :not() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
