[CSS] 疑似セレクタ「:in-range」、「:out-of-range」で範囲内外の値がある要素にスタイルを適用しよう!

疑似セレクタ(:in-range)、(:out-of-range)の評価

頻出度

(1.0)

重要度

(1.0)

総合評価

(1.0)

疑似セレクタ「:in-range」は<input> 要素のうち、現在の値が min および max 属性で指定された範囲内のものにスタイルを適用します。

疑似セレクタ「:out-of-range」は <input> 要素のうち、現在の値が min および max 属性で指定された範囲外のものにスタイルを適用します。

それでは疑似セレクタ「:in-range」、「:out-of-range」の使い方をみていきましょう。

<form>
 <input type="number" name="number" min="1" max="10">
 <input type="submit" name="submit" value="送信">
</form>

 input:in-range {
 background-color: blue;
}

input:out-of-range {
 background-color: red;
}

上記の例では入力された値が範囲内外にあるinput要素に各々のスタイルを適用し、背景色で表示します。

疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。