DEV Community

Cover image for CSS Tips: Apply/Unapply Rules With CSS Negation Pseduo-Class
Nurofsun
Nurofsun

Posted on

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

#webdev #beginners #css #html

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)