How to apply boolean operators not, and

Question

div:not(.wayne) div:not(.garth) .content {
  background-color:red;
}

<div class="wayne">
  <div class="content">Party On Garth</div>
</div>

<div class="garth">
  <div class="content">Party On Wayne</div>
</div>

<div class="Saitama">
  <div class="content">One punch.</div>
</div>

<div class="Naruto">
  <div class="content">Dattebayo</div>
</div>

The background should be red unless the class is either .garth or .wayne. How can I do this for all .content?

Saitama and Naruto should have red backgrounds. Right now nothing has a red background. Any similarly added new characters should also have a red background.

Pseudocode if(!(wayne || garth)){ apply red background to .content}

I'm willing to use JavaScript if necessary. I prefer css.

Google search: [site:stackoverflow.com css multiple not selector](https://www.google.com/search?q=site%3Astackoverflow.com+css+multiple+not+selector) — , Oct 14 '16 at 19:03
Google search: [div not multiple classes](https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=div%20not%20multiple%20classes) — Sterling Archer, Oct 14 '16 at 19:04

score 3 · Answer 1 · answered Oct 14 '16 at 19:02

Chain the :not together

div:not(.wayne):not(.garth) .content {
  background-color:red;
}

<div class="wayne">
  <div class="content">Party On Garth</div>
</div>

<div class="garth">
  <div class="content">Party On Wayne</div>
</div>

<div class="Saitama">
  <div class="content">One punch.</div>
</div>

<div class="Naruto">
  <div class="content">Dattebayo</div>
</div>

score 1 · Answer 2 · answered Oct 14 '16 at 19:01

1

If you want to have multiple :not selectors, you need to change your CSS to look like this

CSS

div:not(.wayne):not(.garth) .content {
  background-color:red;
}

CodePen

answered Oct 14 '16 at 19:01

Hunter Turner

6,804
11
41
56

score 0 · Answer 3 · answered Oct 14 '16 at 19:02

You are using a descendant combinator: . Your selector means:

"Select each element with class content which is a descendant of any div element without garth class which is a descendant of any div element without wayne class."

Remove it.

div:not(.wayne):not(.garth) > .content {
  background-color:red;
}

"Select each element with class content which is a child of a div element without garth nor wayne classes."

How to apply boolean operators not, and

3 Answers3