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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.