how do I select a div with class “A” but NOT with class “B”?

Question

I have some divs:

\"Target\"
\"NotMyTarget\"
\"NotMyTarget\"<         


        
      

Answer 1

You can use the attribute selector to match the div that has only one class:

div[class=A] {
  background: 1px solid #0f0;
}

If you want to select another div that has multiple classes, use quotes:

div[class="A C"] {
  background: 1px solid #00f;
}

Some browsers do not support the attribute selector syntax. As usual, "some browsers" is a euphemism for IE 6 and older.

See also: http://www.quirksmode.org/css/selector_attribute.html

Full example:

  


  
"Target"
 
  
"NotMyTarget"
 
  
"NotMyTarget"
 
  
"NotMyTarget"
 
  
"NotMyTarget"
 

EDIT 2014-02-21: Four years later, :not is now widely available, though verbose in this specific case:

.A:not(.B):not(.C):not(.D):not(.E) {
  border: 1px solid red;
}

Unfortunately, this doesn't work in IE 7–8 as specified in the question: http://caniuse.com/#search=:not