This is actually a very powerful pseudo-class used to negate a normal
selector. CSS selectors are used to narrow down the set of elements
that a rule set will apply to. This Pseudo-class directs the CSS to
apply a rule set to everything that you did NOT select. Since
existing CSS selectors can not cover ALL situations, this
property can be useful.
NOTE:
It is very easy to make a ":not" selector
that does not do what you intend - be sure to test your rules thoroughly.
For instance, be careful when using :not generically - the BODY element
will also be matched unless you specifically tell it to be ignored.
(eg ":not([href])" will match all elements without
an HREF attribute, including the BODY element and its descendents, while
"body :not([href])" will only try to match all
elements without an HREF attribute INSIDE the BODY element.)
Examples
a:not([href]) { color: green }
Match all A elements that do not have an HREF attribute and turn
the text content green.
body :not([href])
Match ALL elements in the BODY that do not have an HREF
attribute (will not match any text nodes at the top level of the
BODY element either.)
body :not(div)
Match all elements in the BODY that are not DIV elements (but
may be nested IN DIV elements.)
a[href]:not([href="http://www.blooberry.com/"])
Match only those HREF hyperlinks that don't link to "http://www.blooberry.com/"
(if it just said a:not([href="http://www.blooberry.com/"])
it would match all A NAME elements as well.)
body :not(.test)
Match only those elements in the BODY that are not labeled as class "test."
body :not(#test)
Match only those elements in the BODY whose ID is not "test."
body :not([class~="test"])
Match only those elements in the BODY where "test" is not part of
the class names. Actually, this is the same as saying body :not(.test)
Browser Peculiarities
In theory, you should be able to combine this pseudo-class with others,
something like: "all B elements that are NOT 'first-child'ren of other
elements. Netscape doesn't seem to support this yet.