否定疑似クラス「not()」は全体のスタイルから一部の要素だけ除外したい時に便利です。
今では主要ブラウザでの対応が進み、WEB制作で活用される頻度も高くなりました。
ただし、not()の記述方法によって各ブラウザの対応が異なる場合があります。
とくにnot()に複数要素を指定する場合は要注意です。
今回は、セレクタやclass等の複数の要素をnot()に指定する方法や注意点をまとめました。
もくじ
１．CSSの否定疑似クラス:not()の基本的な使い方
まずは:not()の基本を簡単におさらいしておきましょう。
例えば「タイトル（<h1>）」や「見出し（<h2>）」のスタイルはそのままに「テキスト（<p>）」のみ除外したい時は、以下のようにnot()の()内に対象セレクタを放り込めばOK。
See the Pen CSS「not()」基本的な使い方 by Miyako (@kouhekikyozou) on CodePen.
「テキスト」以外の要素にcolorが適用されているのがわかると思います。
classの場合は「.」、idは「#」を先頭に付けるのを忘れないでください。
２．複数のCSSセレクタに:not()を適用
では、:not()に複数の要素を指定するのには、どのように記述すれば良いのでしょうか。
MDN Web Docsによれば、カンマで区切れば複数セレクタを指定可能とのこと。
【参考】:not() – CSS: カスケーディングスタイルシート | MDN
試しに、「テキスト（<p>）」に加え「見出し（<h2>）」も:not()で除外し、「タイトル<h1>」のみスタイルを適用させてみましょう。
See the Pen CSS「not()」複数指定（未実装） by Miyako (@kouhekikyozou) on CodePen.
「Result」を確認しタイトルのみ色が変わっているのを確認してください。
しかし「あれ？色が変わっていないぞ」と思った方もいると思います。
残念ながら上記の方法に対応しているブラウザはまだ少ないようです。
※Firefoxではスタイルの適用を確認できましたが、Chromeでは反映されていませんでした（21年1月時点）。
今後、主要ブラウザで対応が進むと思いますが、今のところ、以下のように追加したい数だけ:not()を付け足していく方法が無難かもしれません。
See the Pen CSS「not()」複数指定（対応） by Miyako (@kouhekikyozou) on CodePen.
上記はあくまで例なので、実際は<h1>にスタイルを適用するほうが早いです。
:not()は全体の内ごく一部の要素のみ除外したい場合に有効です。
３．複数のclassにnot()を適用
複数のclassをスタイルから除外したい場合も:not()を付け足す方法をとります。
以下は「サンプル③（.sample3）」と「サンプル⑥（.sample6）」以外の要素にスタイルを適用させました。
See the Pen CSS「not()」複数class指定 by Miyako (@kouhekikyozou) on CodePen.
これなら同じセレクタでも特定の要素だけスタイルから除外できます。
４．セレクタとclassを同時に除外
以下のようにセレクタとclassを一緒に指定しても問題ありません。
See the Pen CSS「not()」セレクタとclass指定 by Miyako (@kouhekikyozou) on CodePen.
この場合、<body>内の<h2>および「sample3」「sample6」classを持つ要素がスタイルから除外されます。
５．疑似クラスを複数指定
あるいは、こんな風に疑似クラスの付いた要素も複数除外することができます。
See the Pen CSS「not()」複数の疑似クラスを指定 by Miyako (@kouhekikyozou) on CodePen.
上記はリストの最初の要素（:first-child）と上から４番目の要素（:nth-child(4)）をスタイルから除外しています。
まとめ
- CSSの否定疑似要素「
:not()」は、複数の要素を指定できる。 - 除外したい要素の数だけ
:not()を付け足していく記述方法が現状、無難。 - セレクタだけでなくclassや疑似クラスも複数指定が可能。
