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

:in-range クラス

 :in-range クラスは、minとmax属性の値が範囲内なら、設定されたスタイルを反映する擬似クラスです。 関係する<label>も、"+label"セレクターでスタイルを設定することができます。

:in-range
input:in-range{
	outline: 2px green solid;
}

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

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

構文(Syntax)

CSS

HTMLElement:in-range {
	style_propaty: value;
	...
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。


 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

in HTML


in JavaScript


Example

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