Menu
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 */ } 
581
Absolutely, divs can have more than one class and with some Bootstrap components you'll often need to have multiple classes for them to function as you want them to. Applying multiple classes of course is possible outside of bootstrap as well. All you have to do is separate each class with a space.
class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.
The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-). Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".
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
134
.A:not(.B) {} But guess who doesn't support that... Indeed, IE<=8.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
