CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:enabledセレクターとは？有効な入力要素をスタイリングする方法

CSSの:enabledセレクターを使用すると、有効（enabled）状態にあるすべての<input>要素にスタイルを適用できます。このセレクターは、フォーム内でユーザーが操作可能な入力フィールドだけを視覚的に強調したい場合に非常に便利です。

逆に、無効化された要素には:disabledセレクターを使うことで、別々のスタイルを設定できます。以下のコード例では、有効な入力欄の背景色を青色に変更し、disabled属性が付いた「Age」フィールドはスタイルの対象外になっていることが確認できます。

コード例

<!DOCTYPE html>
<html>
   <head>
      <style>
         input:enabled {
            background: blue;
         }
      </style>
   </head>
   <body>
      <form action = "">
         Subject <input type = "text" name = "subject"><br>
         Student: <input type = "text" name = "student"><br>
         Age: <input type = "number" name = "age" disabled><br>
      </form>
   </body>
</html>

実行結果のポイント

上記のコードを実行すると、「Subject」と「Student」の2つのテキスト入力欄は有効な状態のため背景が青色で表示されます。一方、「Age」フィールドはdisabled属性によって無効化されているため、青色のスタイルは適用されません。

このように:enabledセレクターを活用することで、フォームの操作性を直感的に伝えるUIデザインが簡単に実現できます。ユーザーにとって入力可能な項目と不可能な項目をひと目で区別できるため、ユーザビリティの向上にもつながります。

  1. 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) { /*

  2. 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