CSSの:in-rangeセレクターとは？指定範囲内の入力値にスタイルを適用する方法
CSSの:in-rangeセレクターは、min属性とmax属性で指定された範囲内の値を持つ<input>要素に対してスタイルを適用するための疑似クラスです。数値入力フィールドなどで、ユーザーが有効な範囲内の値を入力した際に視覚的なフィードバックを与えたい場合に非常に便利です。
:in-rangeセレクターの基本構文
input:in-range {
/* 範囲内の値が入力された場合に適用されるスタイル */
}
実装例
以下のコードでは、5から10までの範囲を指定した数値入力フィールドを作成し、範囲内の値（この例では初期値の9）が入力されているときにのみスタイルが適用されます。
<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
border: 3px dashed orange;
background: yellow;
}
</style>
</head>
<body>
<input type = "number" min = "5" max = "10" value = "9">
<p>スタイルは、入力された値が9（範囲内）の場合にのみ適用されます</p>
</body>
</html>
コードのポイント解説
- type="number"：数値を入力できる入力フィールドを作成します。
- min="5" / max="10"：許容される値の範囲を5〜10に設定します。
- value="9"：初期値として9を設定。9は範囲内（5〜10）にあるため、:in-rangeセレクターのスタイル（オレンジ色の破線ボーダーと黄色背景）が適用されます。
:out-of-rangeセレクターとの組み合わせ
:in-rangeセレクターは、逆の条件でスタイルを適用する:out-of-rangeセレクターと組み合わせることで、範囲内外の状態に応じて異なる見た目を切り替えられます。これにより、ユーザーにとって直感的で分かりやすいフォームUIを実現できます。
input:in-range {
border: 3px dashed orange;
background: yellow;
}
input:out-of-range {
border: 3px solid red;
background: #ffe0e0;
}
対応ブラウザについて
:in-rangeセレクターは、Chrome、Firefox、Safari、Edgeといった主要なモダンブラウザでサポートされています。ただし、Internet Explorerでは動作しないため、レガシーブラウザへの対応が必要な場合は注意しましょう。
-
CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法
CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*
-
CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説
CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white