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.
Top comments (0)