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

I have some divs:

<div class="A">"Target"</div>
<div class="A B">"NotMyTarget"</div>
<div class="A C">"NotMyTarget"</div>
<div class="A D">"NotMyTarget"</div>
<div class="A E">"NotMyTarget"</div>

Is there a CSS selector that will get me the div containing Target but not the divs containing NotMyTarget?

Solution must work on IE7, IE8, Safari, Chrome, and Firefox

Edit: So far Nick is the closest. It's clumsy and I don't like the solution, but at least it works:

.A
{
/* style that all divs will take */
}
div.B
{
/* style that will override style .A */
}
42753 次浏览
小开

I think the best you can do (until CSS 3) is override the styles in this case with what you don't want from class A B in A, like this:

.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }
小开
最佳答案

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:

<!DOCTYPE html>
<html>
<head>
<style>
.A { font-size:22px; }
.B { font-weight: bold; border: 1px solid blue; }
.C { color: green; }


div[class="A"] {
border: 1px solid red;
}
div[class="A B"] {
border: 3px solid green;
}
</style>
</head>
<body>
<div class="A">"Target"</div>
<div class="A B">"NotMyTarget"</div>
<div class="A C">"NotMyTarget"</div>
<div class="A D">"NotMyTarget"</div>
<div class="A E">"NotMyTarget"</div>
</body>
</html>

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

小开 
.A:not(.B) {}

But guess who doesn't support that... Indeed, IE<=8.


提交答案