CSSの:not()で複数の条件を指定する

CSSの:not()で複数条件を指定した際の表示について試してみます。

サンプルコード

以下のようなHTMLを用意して試してみます。

<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box a b">AB</div>
<div class="box a c">AC</div>
<div class="box b c">BC</div>

まずは:not()を連結して使用した場合です。

.box:not(.a):not(.b) {
	background: orange;
}

この場合、「.aではない」 かつ 「.bではない」 .box(Cのボックス)に対して背景が適用されます。
:not()のデモページ

次に:not()内でカンマ区切りにした場合です。

.box:not(.a, .b) {
	background: orange;
}

この場合、「.a または .b」ではない .box(Cのボックス)に対して背景が適用されます。
:not()のデモページ2

次に:not()内でセレクタを連結した場合です。

.box:not(.a.b) {
	background: orange;
}

この場合、「.a かつ .b」 ではない .box(AB以外のボックス)に対して背景が適用されます。
:not()のデモページ3

次にカンマ区切りでセレクタを分けた場合です。

.box:not(.a),
.box:not(.b) {
	background: orange;
}

この場合、「.aではない」 または 「.bではない」 .box(AB以外のボックス)に対して背景が適用されます。
:not()のデモページ4