How to Select a Div with Class "A" But Not with Class "B"

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

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

CSS selector with class a but not class b

I believe you can do this with CSS3 using the :not() selected (example here)

div.classa:not(.classb):not(:last-child) {}

However, as you know, not many browser supports this, so Javascript might be an easier way...

Select elements with certain class and not other classes

You can select them with a query Selector and :not

console.log(document.querySelectorAll("div.b:not(.a)"))

    <div class="a">2</div>    <div class="a b">3</div>    <div class="b">4</div>

CSS selector for an element having class .a and class .b

That's entirely possible. If you specify two classes on an element (without any spaces), that means that it must have both for the rule to apply.

div.a {  color: blue;}div.b {  color: green;}div.a.b {  color: red;}

<div class="a">  A</div><div class="b">  B</div><div class="a b">  AB</div>

Opposite selector of :not(.classA, .classB, .classC) for a (X and (A or B or C)) selector

You can convert the selector classX && (classA || classB || classC) to (classX && classA) || (classX && classB) || (classX && classC)

Which is the following CSS selector:

.classX.classA, .classX.classB, .classX.classC {}

Then you can consider a small JS code to add the .classX in order to create the selector:

let dynamicClassList = ".classA, .classB, .classC";
let selector = dynamicClassList.replace(/,/gi, '.classX, ');selector=selector+'.classX';
$(selector).css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="classA classX">some text</div><div class="classB">some text</div><div class="classX classB">some text</div><div class="classX classB classA">some text</div><div class="classB classA">some text</div><div class="classX">some text</div>

How to select all div inside a class

.color-board{
    background-color: rgba(131, 131, 131, 0.4000000059604645);
    padding: 5px;
    width: 100px;
    height: fit-content;
}

.color-board div {
    width: 30px;
    height: 30px;
    border: 1px black solid;
    border-radius: 1em;
    background-color: white;
}

<div class="color-board">
                <div></div>
                <div></div>
                <div></div>

                <div></div>
                <div></div>
                <div></div>
            </div>

Select elements with certain class and not other classes

You can select them with a query Selector and :not

console.log(document.querySelectorAll("div.b:not(.a)"))

    <div class="a">2</div>    <div class="a b">3</div>    <div class="b">4</div>

JQuery : Select an element with N clases and not class X

You can use selector like this $('div.a.b:not(.c)')

div.a.b selects all div elements that have both classes a and b
:not(.c) but won't select div element with class c

$('div.a.b:not(.c)').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class='a b c'>Div</div><div class='a b'>Div</div>

jQuery select element with class a, but also it can has class b

I'm looking at this:

// in PHP
$('tr.package_' + package_errors_ids[i] + ' td:nth-child(5) input[type=text]')

That will generate something like this, I assume:

// after PHP
$('tr.package_1 td:nth-child(5) input[type=text]')

That won't have any problems at all in selecting a <tr class="package_1 alt">. No trouble at all. Assuming your HTML is getting generated correctly, that means you're doing something else wrong. And I'm going to assume that it's this part:

input[type=text]

Try changing that to

input[type="text"]

How to Select a Div with Class "A" But Not with Class "B"

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

CSS selector with class a but not class b

Select elements with certain class and not other classes

CSS selector for an element having class .a and class .b

Opposite selector of :not(.classA, .classB, .classC) for a (X and (A or B or C)) selector

How to select all div inside a class

Select elements with certain class and not other classes

JQuery : Select an element with N clases and not class X

jQuery select element with class a, but also it can has class b

Related Topics

Leave a reply