:out-of-rangeとは
- ここで説明する:out-of-range とは次の語句からなるCSSの疑似クラスです。
- out
- 読み: アウト
意味: 外、外側 - of
- 読み: オブ
意味: ～の - range
- 読み: レンジ
意味: 範囲
:out-of-range疑似クラスの概要
この疑似クラスはセレクタに該当するinput要素への入力値が min属性とmax属性 の範囲外である時に適用され一時的なプロパティ値の変更を行います。
min属性とmax属性を持たないinput要素には無効な疑似クラスです。
この疑似クラスに類似した疑似クラスとして :in-range があります。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:out-of-range{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使うのはinput要素number型です。 この要素に:out-of-range疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: min属性とmax属性の制限範囲外にあることを検知する
ここではサンプルとしてナンバーボックスに指定範囲外の数値が入力された時に要素の背景色と文字色を変更するようにしています。 初期値では既に指定範囲外の数値が入力されています。
: 0から100までが有効範囲ですinput[type="number"]:out-of-range{
color: ##red;
background-color: ##pink;
}