How to apply boolean operators not, and [duplicate]

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 — user1106925
– user1106925, Commented Oct 14, 2016 at 19:03

Mulan · Accepted Answer · 2016-10-14 19:02:44Z

3

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>

answered Oct 14, 2016 at 19:02

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hunter Turner · Accepted Answer · 2016-10-14 19:01:53Z

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, 2016 at 19:01

Hunter Turner

6,94411 gold badges43 silver badges57 bronze badges

Comments

Oriol · Accepted Answer · 2016-10-14 19:02:17Z

0

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

answered Oct 14, 2016 at 19:02

Oriol

291k71 gold badges459 silver badges535 bronze badges

Collectives™ on Stack Overflow

How to apply boolean operators not, and [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related