備忘録的プログラミングリファレンス

:out-of-range クラス

 :out-of-range クラスは、入力された値が min と max 属性の範囲外になると、設定されたスタイルを反映する CSS の擬似クラスです。 主に min と max 属性をもつエレメント、<input> などが対象の疑似クラスです。

 関係する <label> も、"+label" セレクターでスタイルを設定することができます。

:out-of-range
input:out-of-range{
	outline: 2px red solid;
}

input:out-of-range + label{
	background-color: #FF000044;
}
詳しくは Example を参照してください

 対になる疑似クラスに :in-range クラスがあります。:in-range クラスはminとmax属性の値の範囲内ならスタイルを反映します。

構文(Syntax)

CSS

HTMLElement:out-of-range {
  style_propaties;
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。
 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

in HTML


in JavaScript


Example

 :out-of-range の例です。:in-rangeクラスも使っています。範囲外になるとアラートが出ます。