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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up