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.