How To Use The :not Pseudo Class In CSS

The :not pseudo-class in CSS allows you to exclude particular elements from being styled, and it can be super useful when working with list items.

So that’s why when you read this blog post till the end, you’re going to discover exactly how to use this amazing feature in CSS.

First of, let’s use the following HTML & CSS to showcase this pseudo class in full action

<ul class="numbers-list">
  <li class="number">1</li>
  <li class="number">2</li>
  <li class="number">3</li>
  <li class="number">4</li>
  <li class="number">5</li>
</ul>

.numbers-list {
  width: 5rem;
  margin: auto;
  padding: 1rem;
  background-color: coral;
  list-style: none;
  text-align: center;
}

.number {
  background-color: yellow;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 2rem;
}

Above, we have a simple unordered list of numbers with some basic CSS styling which looks like this:

Now as you can see, each number is styled perfectly which is all dandy but imagine we want to exclude the first number from being styled.

We could of course create a new CSS class and style it individually but that’s pretty much overkill. Instead, let’s use the :not pseudo-class to tell CSS not to style the first element in the numbers list.

To achieve that, do the following:

.number:not(:first-child) {
  background-color: yellow;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 2rem;
}

Now, the page should look like this.

So what did we do up there?

First, we added the :not pseudo-class, and inside of that we told CSS to exclude the first child in the list. Hence the first number is no longer styled.

But what if we wanted to exclude the second number instead?

You can do that this way:

.number:not(:nth-child(2)) {
  background-color: yellow;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 2rem;
}

Instead of using the :first-child pseudo-class, we now used the :nth-child which allows us to pass in an index number of one of the child elements.

The web page now looks like this…

Pretty neat ha?

Well, that’s the end, if you learned something from this short post, let me know in the comments down below.

And remember, your dream career is just one step away!

Michiel Out!

PS – I’m currently hosting a FREE Giveaway where I will give 5 lucky winners 2 weeks’ worth of video materials from my JavaScript Mastery Blueprint. So don’t miss out on it and sign-up here

https://michielarkema.com/jsmb-giveaway