When writing CSS, there are times you want to apply a style to a group of elements but exclude one or more specific elements from that styling. This is where the powerful :not() pseudo-class comes in—it allows you to exclude specific elements or patterns from a selector, giving you cleaner and more targeted CSS.
In this article, you’ll learn how to exclude an element in CSS with clear examples and best practices.
✅ The Tool: :not() Pseudo-Class
The :not() selector is used to exclude elements that match a particular condition.
📌 Basic Syntax:
selector:not(element-to-exclude) {
/* your styles */
}
This means: “Apply styles to everything that matches selector, except element-to-exclude.”
✅ Example 1: Exclude a Specific Element by Tag
Suppose you want to style all list items (<li>) inside a <ul>, except the first one.
📌 CSS:
ul li:not(:first-child) {
color: blue;
}
📌 Result:
- All
<li>items after the first will be blue. - The first remains unaffected.
✅ Example 2: Exclude a Specific Element by Class
You can also exclude an element with a specific class.
📌 CSS:
p:not(.no-style) {
font-size: 18px;
color: #333;
}
📌 HTML:
<p>This paragraph will be styled.</p>
<p class="no-style">This paragraph will not be styled.</p>
✅ Result:
Only the paragraph without the .no-style class gets the styling.
✅ Example 3: Exclude Element by ID
Although IDs are unique, you can still use :not(#id) if your selector might include that one element.
div:not(#main-content) {
background-color: #f5f5f5;
}
✅ Use Case:
Apply a background to all <div>s except the one with ID main-content.
✅ Example 4: Exclude Based on Attribute
input:not([type="submit"]) {
border: 1px solid #ccc;
}
✅ Use Case:
Apply styles to all <input> fields except submit buttons.
✅ Example 5: Exclude Multiple Elements
You can chain multiple :not() selectors together:
.container div:not(.skip):not(.hidden) {
padding: 10px;
}
This targets all <div> elements inside .container, except those with class skip or hidden.
🧾 Summary
| Goal | CSS Example |
|---|---|
| Exclude by tag | li:not(:first-child) |
| Exclude by class | p:not(.exclude) |
| Exclude by ID | div:not(#header) |
| Exclude by attribute | input:not([type="submit"]) |
| Exclude multiple conditions | div:not(.one):not(.two) |
🧠 Conclusion
The :not() selector gives you granular control over which elements receive your CSS styles. Whether you’re excluding elements by class, ID, tag, or attribute, :not() helps you write cleaner, smarter, and more maintainable code.
Pro Tip: Avoid overusing :not() in very complex selectors—it can make your code harder to read. Use it strategically for clarity and precision.