Tutorial
The :not Pseudo-Class in CSS
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Select elements that don’t match a certain selector with :not. Provide a simple selector as an argument to :not and all the elements that don’t match will be selected.
This first example will select all p elements that don’t have a first-par class:
p:not(.first-par) {
background-color: #E4AF4C;
}
This second example, we’re selecting the ::before pseudo-element for all list items (li) that are inside an unorganized list (ul) that doesn’t have an ID of toc or a class of in-list:
ul:not(#toc, .in-list) li::before {
/* Something stylish */
}
And in this third example we’re selecting everything inside article elements that’s not a span:
article *:not(span) {
color: cornsilk;
}
👉 :not is supported in all modern browsers.
