By far the best & most powerful selector I have learned about in the past few months is CSS3's :not() selector. Selectors generally style all elements that match that selector, so something like this…

p > a { color: #0ac; }

…will style all the links in our paragraphs (that are direct children of the paragraph) to have light blue text. Super-duper. But maybe we don’t want to style all of the links to be blue…

The :not() selector plays by different rules. It allows you to filter your selection by ignoring whatever additional selector you throw at it.

So going back to the example above, maybe we have some special links in our paragraph that we would prefer to not have that blue color that the others have. Let’s assume that the special links have the class ‘.special’ attached to them. Of course you could do something like this:

p > a { color: #0ac; }

p > a.special { color: inherit; }

..where the second selector resets the ‘.special’ links to the default. This isn’t ideal though, especially in larger cases where you don’t want to be resetting multiple properties on your ‘.special’ class. So we’ll use the :not() selector instead:

p > a:not(.special) { color: #0ac; }

If I were to translate that selector to plain english, it would sound something like “select all of the (direct child) <a> tags inside all <p> tags where the <a> tag does not have the .special class”. Phew, what a mouthful. But you can totally see how useful this is for NOT styling certain elements.