Using the :not() property

CSS sass

When building a site, a designer or developer usually runs into a situation where an element needs certain styling but other elements do not. This could be anything from bottom padding to borders. Usually the designer or developer would write CSS for the one element and then additional CSS for the other elements. Which is fine; but over time this adds many lines of CSS to your code base and increases page load time. Surely there’s a better way right? There is and you should be using the :not() CSS psudo class wherever possible.

Introducing :not()#

The :not() psuedoclass is incredibly useful and easy to use. It’s used similarly to jQuery’s .not() function. Basically, any CSS element that does not match what’s inside the psuedoclass’ parenthesis will be styled.

    

        CSS
        
    

    
        
.posts > .post:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

In the example above, I’m adding a border to the bottom of each .post element except the last child of the parent .posts element. You’re not limited to other psuedoclass either. You could use HTML elements like p or other classes such as .selected as conditions too.

Without the :not() psuedoclass more lines of code would be needed. Also, a small fraction of rendering time would be needed to overwrite already existing styles with removing the bottom border.

    

        CSS
        
    

    
        
.posts > .post {
  border-bottom: 1px solid #ccc;
}

.posts > .post:last-child {
  border-bottom: none;
}

For more information on the :not() psuedoclass, see MDN’s page on the subject.

More Use Cases of :not()#

In this section, I’ve included more use cases for the :not() psuedoclass. I’ll be updating this section periodically to include more examples.

Hide inactive elements

Say you’re trying to hide all other elements except the active element. Obviously, one could write multiple CSS rules to target active and inactive elements or you could write some CSS hiding any blocks not containing the .active class.

    

        CSS
        
    

    
        
.block:not(.active) {
  display: none;
  visibility: hidden;
}

I find this snippet of code useful for carousels and slideshows.

Back to notes