Two classes in: not () selector

Question

I want some styles to be applied to an element when it does not have two classes (not from two classes, but from both classes). The selector :notdoes not seem to accept two classes. Using two separate selectors :notmakes it be interpreted as an OR operator. I need styles to be applied when it will be

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>

Run codeHide result

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

Answer 1

:not , , ,

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>

Hide result

---

, :

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>

Hide result

Answer 2

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

<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>

Hide result