CSS3 - :not selector

CSS3 - :not selector

 

Goal:

Understand the different applications of the CSS3 :not selector

Overview:

Trying to find useful information about CSS3, and specifically the :not selector can be hard. So in order to try and alleviate that, here are some (hopefully) useful hints and tips.

The Specification:


    The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.

Not so clear, is it?! What it means is that whatever selector you append this to will filter OUT anything that matches X.

"simple selector" in the specification refers to a single element, attribute selector, class, id or pseude-class:

body
*
[value="foo"]
.myClass
#myId
:hover
 

Which browsers support it?

  • Firefox 3 - Includes other Gecko 1.8-based browsers; Mozilla Suite, Seamonkey, Camino, Flock, etc.    
  • IE 7 - DOES NOT    
  • Opera 9.5    
  • Safari 2.0    
  • Safari 3.1    
  • Konq. 3.5.4    
  • OmniWeb 5.5

Examples:

here is the html:

 <div class="wrapper">

    <div class="inner">one</div>

    <div class="inner">two</div>

    <div class="inner outer">three</div>

    <div class="inner last">four</div>

 </div>

 here is the css styling

.wrapper .inner:not(.outer) {

   color: red;

}

This will add the color Red to the three inner divs, "one", "two", and "four", but exclude or filter out "three" as the latter includes another class "outer".

What about:

.wrapper .inner:not(.outer, .last) {

   color: red;

}

Will it exclude "four" as well. It used to in Firefox, but was a bug and has recently been fixed and so no longer supports this format. Some options include:

You can chain them together:

.wrapper .inner:not(.outer):not(.last) {

   color: red;

}

 Define mutiple selectors:

.wrapper .inner:not(.outer)

,.wrapper .inner:not(.last) {

   color: red;

}

Exclude with mutiple class declarations:

.wrapper .inner:not(.outer.last) {

   color: red;

}

Print | posted @ Wednesday, August 17, 2011 7:33 AM

Comments on this entry:

No comments posted yet.

Post A Comment
Title:
Name:
Email:
Comment:
Verification: