Two classes in :not() selector

Question

I want to have certain styles applied to an element, when it does not have two classes (not either of the two classes, but both of the two classes).
The :not selector does not seem to accept two classes. Using two seperate :not selectors causes it to be interpreted as an OR statement. I need the styles to be applied when it is does

p:not(.foo.bar) {
  color: #ff0000;
}

<p class="foo">This is a (.foo) paragraph.</p>
<p class="bar">This is a (.bar) paragraph.</p>
<p class="foo bar">This is a (.foo.bar) paragraph.</p>
<p>This is a normal paragraph.</p>

So any element with the class foo should have the styles applied to it, as well as any element with the class bar. Only if an element has both classes (class="foo bar"), the styles should not be applied.

Answer 1

The :not pseudo class takes a simple selector, so use i.e. the attribute selector

p:not([class="foo bar"]) {
  color: #ff0000;
}

<p class="foo">This is a (.foo) paragraph.</p>
<p class="bar">This is a (.bar) paragraph.</p>
<p class="foo bar">This is a (.foo.bar) paragraph.</p>
<p>This is a normal paragraph.</p>

---

Update based on a comment

If the order of the classes can alter, do like this

p:not([class="bar foo"]):not([class="foo bar"]) {
  color: #ff0000;
}

<p class="foo">This is a (.foo) paragraph.</p>
<p class="bar">This is a (.bar) paragraph.</p>
<p class="foo bar">This is a (.foo.bar) paragraph.</p>
<p>This is a normal paragraph.</p>
<p class="bar foo">This is a (.bar.foo) paragraph.</p>