ywork2020.com

Title

指定条件に当てはまらない要素を検知する

目次 (INDEX)

:notとは

ここで説明する:not とは次の語句からなるCSSの疑似クラスです。
not
読み: ノット
意味: ~ではない。否定の意

目次に戻る

:not疑似クラスの概要

この疑似クラスはセレクタに該当する要素が引数の条件以外である時に適用され一時的なプロパティ値の変更を行います。

つまり、:not(引数)は「引数の条件に当てはまらない」という意味になります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:not(引数){プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのはinput要素です。 この要素に:not疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 指定条件に当てはまらない要素を検知する

ここではinput要素のtext型、number型、button型の3種類を配置してbutton型ではない要素に text-decoration を設定してテキストに2重線のアンダーラインを引いています。

input要素text型

input要素number型

input要素button型

input{
	text-decoration: none;
}
input:not([type="button"]){
	text-decoration: underline double ##limegreen;
}

目次に戻る

参考: 除外条件を複数指定する

前セクションでは1つの除外条件を指定しましたが、複数指定する場合は
:not(除外条件1):not(除外条件2)
というぐあいに連続で:not疑似クラスを記述します。 この場合の条件解釈は「除外条件1」または「除外条件2」となり「OR」の意味であり、「AND」ではありません。

これとは別の記法で引数の条件を
:not(除外条件1, 除外条件2)
のように[,]カンマで区切ることで一部のブラウザでは動作する場合がありますが、 一般的ではありませんので注意してください。

input要素text型

input要素number型

input要素button型

input{
	text-decoration: none;
}
input:not([type="button"]):not([type="number"]){
	text-decoration: underline double ##limegreen;
}

目次に戻る