CSS Tips: Apply/Unapply Rules With CSS Negation Pseduo-Class

Well, this is another part of CSS tips series. Now we will learn how to utilize :not() also known as CSS pseduo-class.

The Power of CSS Negation Pseduo-Class

Result

Just look at example below, how I use it for navigation links.

Let me explain this code below.

.navbar-link {
  color: #0d4ee5;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 15px 10px;
}

So, I have an element with class .navbar-link and it has default style as above, having blue color, bold text, and so on.

and How I unapply the default color except for the last element that has class .navbar-link?

I would write a code like this.

.navbar-link:not(:last-child) {
  color: #555555;
}

and you can see the result on embedded codepen.

Conclusion

My time saved a lot when I use this thing and my code looks more clean and neat.

So I start include this tips/trick of CSS to my list of topics that I want to share to you guys.