CODEWITHSUNDEEP
htmlcss
Connor
Connor

Reputation: 469

Two classes in :not() selector

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.

Upvotes: 4

Views: 200

Answers (2)

Asons
Asons

Reputation: 87191

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>

Upvotes: 8

LKG
LKG

Reputation: 4192

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>

Upvotes: 0

Related Questions