CSSの:out-of-rangeセレクターとは？範囲外の値を持つ入力要素のスタイリング方法
CSSの:out-of-rangeセレクターを使用すると、指定された範囲外の値を持つ<input>要素に対してスタイルを適用できます。
:out-of-rangeセレクターの概要
:out-of-rangeは、min属性とmax属性で定義された許容範囲の外側にある値が設定されたフォーム要素を対象とするCSS擬似クラスです。数値入力フィールドなどで、ユーザーが範囲外の値を入力した際に視覚的な警告を表示するために活用されます。
なお、範囲内の値を持つ要素をスタイリングしたい場合は、対になる:in-range擬似クラスを使用します。
使用例
以下のコードを実行して、:out-of-rangeセレクターの実装方法を確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
border: 3px dashed orange;
background: yellow;
}
</style>
</head>
<body>
<input type = "number" min = "5" max = "10" value = "15">
<p>このスタイルは、範囲外の値が入力された場合にのみ適用されます</p>
</body>
</html>
コードの解説
この例では、min="5"、max="10"という範囲制約を持つ数値入力フィールドを定義しています。初期値として「15」が設定されているため、ページを読み込んだ時点で:out-of-rangeのスタイルが適用され、入力欄がオレンジ色の破線枠と黄色い背景で表示されます。
その後、値を5〜10の範囲内（例えば「7」）に変更するとスタイルは解除され、通常の外観に戻ります。このように、JavaScriptを使わずCSSだけで範囲チェックの視覚的フィードバックを実現できるのが大きなメリットです。
-
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