By Jess Genevieve Brown

Learn more about the CSS3 NOT selector

By Jess Genevieve Brown

To coincide with our new Jump Start book series, Learnable and SitePoint have produced a series of JumpCasts — bite-sized video tutorials covering a range of dev and design topics. If you like what you see here, there are plenty more over at our sister site,

To start off, join Russ Weakley from Max Design as he presents a Learnable JumpCast on a new CSS3 selector called the “not” selector.

The interesting thing about the “not” selector is that it’s the opposite of almost every other selector you’ve used. In most cases, you’re aiming to style something very specific: “I want to style that element” or “that subset of elements”. With the not selector, you’re doing the opposite. Instead of styling one element, you’re saying, “I want to style everything but that element”. We’re doing the opposite of most other selectors. Head over to Learnable to find out more …

  • Thanks a lot for sharing this JumpCast, I’ve learned something today since I .did:NOT(#know) { it:existed; }

  • I am so glad this selector exists. It’s something I’ve needed quite a bit.

    One question though: is it possible to select elements or class names? (example: h1:not or .classname:not)

  • @Charles, yes! you can use any selector before the :not() selector – including elements, classes, ids etc. The only restrictions are on what can be placed inside the brackets.

  • Dre

    Great stuff, Easy voice to follow and comprehensive.

Get the latest in Front-end, once a week, for free.