Skip to content
The :not css selector is an incredibly powerful selector that every web developer should know about ????.
Many web developers don't know about this selector and don't use it because they don't understand its power.
This guide is going to change all that. In this guide, I'm going to share with you everything you need to know to get started using the :not css selector... right away!
You'll learn how to use the :not css selector with 4 different examples, which means you'll be able to start using it immediately in your next project.
All you need is to read this guide without skipping any steps.
There are so many use-cases where :not css selector can be helpful.
What if you want to add some margin-top to all elements except the first child? Or have a desire to skip the specific element or class for styling?
What is the :not() selector in css?
Its formula is very simple & straightforward. Consider :not css as except or skip.
When you want to apply the styles to all the elements by skipping the specific class or element, then :not css selector is the way to go with.
Let's dive into several examples or use-cases, so you can understand the actual power of :not css selector.
:not css selector with another pseduo class
Add the margin-top to all the list items except the first child. It's a really common case, and we use it from time to time.
So, we have list items where ul has a class name list, and li items are assigned common class list-item.
We selected the list-item class and added :not selector.
After that, using the :first-child, which is also another selector, to select the first child from the list of elements.
Now our command looks like .list-item:not(:first-child), which means, apply the styles to all the list-item except first-child.
Below is a working example with output:
<h2 class="heading">Example #1</h2>
<ul class="list">
<li class="list-item">PHP</li>
<li class="list-item">CSS</li>
<li class="list-item">HTML</li>
<li class="list-item">JS</li>
</ul> .list-item:not(:first-child){
margin-top:1rem;
background-color: #ff5852;
}
css not selector with the class or id
Add the background color to all the list items except the .active class.
We have the same case as in the first example. The only difference is instead of using first-child, we will target the class which is with a list-item, and that is .active class.
Our command looks like .list-item:not(.active), which means, apply the styles to all the list-item except the list-item with another class which is .active.
Just a quick note here, you can also use the id, .list-item:not(#active). For this to work, you will need to put on an id of active on the element of the list-item.
<h2 class="heading">Example #2</h2>
<ul class="list">
<li class="list-item">PHP</li>
<li class="list-item active">CSS</li>
<li class="list-item">HTML</li>
<li class="list-item">JS</li>
</ul>.list-item:not(.active){ background-color: #ff5852; }
Tip:
:not css selector can be used for a specific element, specific child element, a specific attribute, specific class name inside the element, and so on.
css not() selector with the attribute
Apply the background color to all the list items except the one with attribute attr=php.
So, we just added attr for demonstration purposes, you can add or select any type of attribute, and yes, attr is just a random name.
Our command looks like .list-item:not(), which means, apply the styles to all the list-item except the list-item with an attribute value set to php.
Below is a working example with output:
<h2 class="heading">Example #3</h2>
<ul class="list">
<li class="list-item" attr="php">PHP</li>
<li class="list-item" attr="css">CSS</li>
<li class="list-item" attr="html">HTML</li>
<li class="list-item" attr="js">JS</li>
</ul>.list-item:not([attr=php]){
background-color: #ff5852;
}
:not css selector with the child element
Apply background-color to all the inner child (anchor tag) of list-items except the one with the class .active
Our command looks like .list-item:not(.active) a, which means, apply the styles to all the anchors (a) of list items except the one which has .active class.
Below is a working example with output:
<h2 class="heading">Example #4</h2>
<ul class="list">
<li class="list-item"><a href="">PHP</a></li>
<li class="list-item active"><a href="">CSS</a></li>
<li class="list-item"><a href="">HTML</a></li>
<li class="list-item"><a href="">JS</a></li>
</ul>.list-item:not(.active) a{
background-color: #ff5852;
}
I hope you found this article helpful and that it has given you another skill set to add to your coding arsenal!
If you are interested in learning more about CSS Tips & Tricks, we encourage you to subscribe to our newsletter.
We are always happy to hear your feedback, so please feel free to let us know by sharing it with others.
As a web developer, you will definitely love this guide as well: Quick tips to build your own website as a web developer
Here is a complete guide to CSS grid
