css - 2つのクラスをテストすることはより少ないcssでは存在しません

Question

私は要素を持っているので、クラスとして.fooまたは.bar、あるいはその両方、または何も持たない可能性があります。

<div class="foo bar">green</div>
<div class="foo">green</div>
<div class="bar">green</div>
<div class="something-else">red</div>

要素にどちらのクラスも含まれていないことをテストするにはどうすればよいですか。

私はこのようなことを試しましたが、期待どおりに機能しません：

div {
  background: green;
  &:not(.foo) and &:not(.bar) {
    background: red;
  }
}

lessとnot（）を使用した例は多くありませんが、ドキュメントには1つしかありません。

score 2 · Accepted Answer

CSSセレクターの複数の条件に言及しないようにするには、それらをチェーン化する必要があります。 div:not(.foo):not(.bar)

div {
  background: green;
  &:not(.foo):not(.bar) {
    background: red;
  }
}

score 0 · Accepted Answer

常に純粋なcssの代替手段があります。

div { background: red; }
div.foo, div.bar { background: green; }

score 0 · Accepted Answer

2つの＆：not（）ルールをネストすることでそれを行うことができましたが、これが最善の方法かどうかはわかりません。

div {
  background: green;
  &:not(.foo) {
    &:not(.bar) {
      background: red;
    }
  }
}

3 に答える 3