-4

I want to apply a style only for elements that have NOT both classes class1 AND class2

In this example I want "has both" to be red (this works), and "has one" and "has another" to be grey (this doesn't work).

The following example does not make the job. Is there a way to do that and to save my day ?

div.class1.class2 { background: red; }
div:not(.class1.class2) { background: grey; }
<div class="class1">has one</div>
<div class="class2">has another</div>
<div class="class1 class2">has both</div>
<div class="class3">has anything else</div>

When I study the syntax https://developer.mozilla.org/en-US/docs/Web/CSS/:not, it seems that it is not possible. But in case of I misread it, or some undocumented ways to do this exists, I ask you for it.

Improve this question
7
  • You didn't say what color will the .class3 receive. Should it be also grey because it is NOT both classes class1 AND class2 or it will not receive any color because it is NOT both classes class1 AND class2? Commented Oct 9, 2019 at 8:42
  • The question is "how to make it in a one-time declaration". Of course I can declare div.class1, div.class2 { ... }, but that would not be fun. What if I add more classes. Commented Oct 9, 2019 at 8:43
  • 1
    please be clear on what you are really up to so that we can provide good answers Commented Oct 9, 2019 at 8:43
  • Ooops I forgot to say that what I've written should set .class3 in grey too, logically ! Commented Oct 9, 2019 at 8:43
  • 1
    I suggest showing us a glimpse of your real case here. Just by looking at the question, removing the :not(.class1.class2) will solve the problem Commented Oct 9, 2019 at 8:48

3 Answers 3

Reset to default
1

You can use the :not() selector in combination with a class, like in the fiddle below. Then it will target any class that doesn't have class2. 

div.class1.class2 { background: red; }
div.class1:not(.class2){background: grey; }
div.class2:not(.class1){background: grey; }
<div class="class1">has one</div>
<div class="class2">has another</div>
<div class="class1 class2">has both</div>
<div class="class3">has anything else</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The question was here to get a simple way to declare "I do not want both .class1.class2". You made it really-really complicated here xD.
@Baptiste This is how its done. This is not "really really complicated".
Your answer works, but -1- @Swaroop Deval made it more simple, and -2- the question was to declare the style of .class1 and .class2 in one line only.
div.class1:not(.class2), div.class2:not(.class1){background: grey; }
He defined CSS for one class (ok, two, but you can have as many selectors for one rule as you want) That's basic CSS and totally great. It fully depends on what you want to achieve. If you want to style an element with class1 which has not class2 then my solution is more accurate. Really depends on your usecase.
0

You can give grey background to elements having one of these two classes and red background to element that has both classes.

div.class1.class2 { background: red; }
div.class1, div.class2 { background: grey; }
<div class="class1">has one</div>
<div class="class2">has another</div>
<div class="class1 class2">has both</div>
<div class="class3">has anything else</div>

Improve this answer

1 Comment

Yes I can. I asked it an empiric way, please guess I wanted to do more complicated things than just apply a colour to two divs. I simplified my real case to make my question understandable.
0

You can combine many :not selectors in CSS

div.class1.class2 {
  background: red;
}

div:not(.class1):not(.class2) {
  background: grey;
}
<div class="class1">has one</div>
<div class="class2">has another</div>
<div class="class1 class2">has both</div>
<div class="class3">has anything else</div>

JSFiddle link

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.