CSS3 guide: 3.3. :not() pseudo class

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

3.3. :not() negation pseudo class

The :not() negation pseudo class selector [w3.org] selects the elements which do match the directive inside the (argument selector).

Syntax: :not(foo)

simple selectors

except

pseudo elements

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>:not() negation pseudo class test</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <style type="text/css" media="screen">
   div.wrapper {
    background: #f00;
    border: 1px solid #000;
   }
   div:not(.wrapper) {
    background: #fff;
    margin: 20px;
   }
   a {
    background: #eee; 
    color: #00f;
   }
   a:not([href*=google]) {
    background: #ff0; 
    color: #f00;
   } 
  </style>
  <!--[if gt IE 7]>
  <script type="text/javascript">
   $(document).ready(function(){
    // target the :not selectors and give them a class for IE8
    // the class can be reused as long as you add a qualifying element 
    // before the classname in the CSS selector
 
    $("ul a:not([href*=google]), div:not(.wrapper)").addClass('isnot');
   });
  </script>
  <style type="text/css" media="screen">
  /** 
   copy the :not styles in here, or put separately the main CSS, 
   it won't work as a grouped selector. 
  **/ 
  a.isnot {background: #ff0; color: #f00;} 
  div.isnot {background: #fff; margin: 20px;}
  </style>
  <![endif]-->
 </head>
 <body>
  <div class="wrapper">
   <div>
    <p>This internal wrapper div should be white with a 20px 
    margin around it, as it does not have the class name 
    wrapper attached to it</p>
    <ul>
     <li><a href="http://google.com">Google</a></li>
     <li><a href="http://www.webmasterworld.com">WebmasterWorld</a> - 
     Should have a highlighted background as the href 
     attribute does not contain "google"</li>
     <li><a href="http://google.co.uk">Google UK</a></li>
    </ul>
   </div>
  </div>
  <!--[if lt IE 8]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
 <![endif]-->
 </body>
</html>

Support:

Widely supported in standard compliant browsers
Not supported by IE (including IE8)

Graceful fallback:
Identify or classify all major layout requirements and only use this for non-critical visual enhancements.
- or -
added nto code sample above,

ie8.js can be used for IE6/7 recognition
the effect can recreated using jQuery for IE8, the usual limitation is that IE8 CSS has to go in a separate ruleset, it cannot be combined with the more advanced :not selector rule

Practical use:
With lacking support from all versions of IE, this can be used as an enhancement. Used in conjunction with the 3.2 Attribute selectors [webmasterworld.com] it can be used to select the reverse of attributes or even refine them. It can be also be used to raise a particular selector's specificity.

The :not() pseudo class allows useless selectors to be written. e.g.

div:not(ul)

{}, which is equivalent to

div {}

but with a higher specificity [w3.org].

[edited by: SuzyUK at 9:38 am (utc) on July 13, 2009]

CSS3 guide: 3.3. :not() pseudo class

swa66

swa66

jameshopkins

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week