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.
