The :not Pseudo-Class in CSS

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.