How to CSS :not(.class1.class2)?

Question

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.

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**? — Carl Binalla, Oct 09 '19 at 08: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. — Baptiste, Oct 09 '19 at 08:43
please be clear on what you are really up to so that we can provide good answers — Gildas.Tambo, Oct 09 '19 at 08:43
Ooops I forgot to say that what I've written should set .class3 in grey too, logically ! — Baptiste, Oct 09 '19 at 08:43
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 — Carl Binalla, Oct 09 '19 at 08:48
The dupe explain very well how CSS `:not()` works, even if it compare with jQuery's version. CSS4 draft that it will enable using `:not()` with more than one selector. — Asons, Oct 09 '19 at 08:56
The related question @LGSon marked as a duplicate gives the answer in chapter 2 of the selected answer : it is not possible in pure-css, dot. — Baptiste, Oct 09 '19 at 08:59

score 1 · Answer 1 · answered Oct 09 '19 at 08:35

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>

answered Oct 09 '19 at 08:35

cloned

6,346
4
26
38

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 Oct 09 '19 at 08:37
1

@Baptiste This is how its done. This is not "really really complicated". – Oct 09 '19 at 08:38
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. – Baptiste Oct 09 '19 at 08:41
`div.class1:not(.class2), div.class2:not(.class1){background: grey; }` – Prakash Rajotiya Oct 09 '19 at 08:45
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. – cloned Oct 09 '19 at 08:46

score 0 · Answer 2 · answered Oct 09 '19 at 08:33

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>

answered Oct 09 '19 at 08:33

Swaroop Deval

906
5
22

2

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. – Baptiste Oct 09 '19 at 08:34

score 0 · Answer 3 · answered Oct 09 '19 at 08:46

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

How to CSS :not(.class1.class2)?

3 Answers3