Pseudo-class:
not

Support Key: [N6]
Other Document-Tree
Pseudo-Classes

root
empty
first-child
first-node
last-child
last-node
lang
= Index DOT Css by Brian Wilson =
Main Index | Property Index | CSS Support History | Browser History



   Quick Statistics   
Applicable Elements:
Any
HTML Equivalent:
NA
What is it?
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

Boring Copyright Stuff....