CSSの擬似クラス:not()で複数指定する方法を解説！

CSSで疑似クラスの:not()は、指定したセレクタに一致しない要素を指します。例えば以下のように記述するとdiv以外の要素を選択することが出来ます。

この擬似クラスの:not()ですが、通常は1つの対象をして使われますが、今回は複数指定したい場合のやり方を解説します。

まずはOR条件で:not()で複数指定する場合の解説です。例としてa要素とp要素の2つの対象で、「a要素またはp要素を除外する」というOR条件のような書き方は下記となります。

上記のサンプルコードのように:not(A):not(B)という形でつなげて書くことでOR条件で:not()の擬似クラスを利用することが出来ます。

上記のサンプルコードではa要素とp要素が:not()の擬似クラスで指定されているため、a要素とp要素以外の要素のテキストのカラーが青になります。

続いて実践でよく利用されるclass名でOR条件で:not()を使ってみましょう。下記のサンプルコードを見てみましょう。

class名の場合でも:not()の中にclass名で指定してつなげて書くことでOR条件として利用することが出来ます。

上記のサンプルコードでは.sample-1と.sample-3が:not()の擬似クラスで指定されていて、それ以外の.sample-2の要素だけ色が青になっています。

CSS3の上位仕様となるSelectors Level4の仕様では:not()の擬似クラスのOR条件の下記の書き方が可能となります。

:notの括弧中にセレクタを複数入れることでOR条件として指定することが出来ます。こちらの方が先程の:notを複数並べるよりも記述量が少なくかけますがまだ対応しているブラウザに制限があるため使う際には気をつける必要があります。

この記述の仕方に対応しているブラウザは下記より確認頂けます。