Untangling the CSS3 :not Selector

The CSS3 :not selector may not be as flashy nor widely known as animations or media queries, but this simple pseudo-class packs a punch and is easy to use. Before we dig in, I’d like to point out (no pun intended) the excellent CSS reference section on the SitePoint website. You’ll find a nice description and browser compatibility table for the :not selector, as well as information about the other CSS3 pseudo-classes, like :nth-child, :last-child and :checked.

Why :not?

The :not pseudo-class is easy to use and if you’re at all familiar with the jQuery version of this selector, then you should feel right at home. Let’s take a look at the following example.

 p.intro {     color:#333;     line-height:1.5em;     margin-bottom:1.25em; } p:not(.intro) {     color:#444;     font-size:.875em;     line-height:1.3em;     margin-bottom:1em;     width:80%; } 

Notice the second rule, which uses the :not selector. What this CSS3 pseudo-class does is first select all paragraphs, then exclude any paragraphs with the intro class. In other words, what comes before :not will be targeted and what comes after :not in parentheses will be excluded. You can target whatever elements you want, however there are some restrictions on what you can and cannot negate. Unsurprisingly, you can’t use the :not selector within a :not selector. And you also can’t use a pseudo element like p:before, not to be confused with pseudo-classes like li:last-child, which thankfully you can use. What’s nice about the :not selector is that we can really focus in on a specific group of elements, style them and not have to worry about the elements that were excluded. Now that you know a little more about this pseudo-class, I’d like to share two of my favorite uses for the CSS3 :not selector.

List of Links

 li:not(:last-child) {     border-right:1px solid #000; } 

Form Fields

 input:not([type=checkbox]) {     border:1px solid #999;     border-radius:3px;     color:#aaa;     padding:4px 2px;     width:40%; } 

How have you been using the CSS3 :not pseudo-class? Leave a comment below or tell me on Twitter.

---

David F. Weiss is a Front-End Web Designer/Developer & Web Enthusiast, who lives and works in Connecticut, USA. He is passionate about the web and spends way too many hours in front of a computer and not enough time with his wife and little princess.