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

CSSの役割：読み取り専用セレクター（:read-only）の使い方

CSSの :read-only セレクターを使用すると、読み取り専用（readonly）として設定された要素だけを選択し、スタイルを適用することができます。編集可能な入力欄と区別したい場合などに便利な擬似クラスです。

サンプルコード

以下のコードを実行すると、:read-only セレクターの実際の動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         input:read-only {
            background-color: blue;
            color: white;
         }
      </style>
   </head>
   <body>
      <form>
         Subject: <input type = "text" name = "subject" value = "Maths"><br>
         Student: <input type = "text" name = "student" readonly value = "Amit"><br>
      </form>
   </body>
</html>

コードの解説

この例では、フォーム内に2つのテキスト入力フィールドを配置しています。

  • 1つ目の「Subject」フィールドは通常の編集可能な入力欄です。
  • 2つ目の「Student」フィールドには readonly 属性が設定されているため、ユーザーは値を編集できません。

:read-only セレクターにより、読み取り専用の入力フィールドには青い背景色と白い文字色が適用されます。その結果、どちらのフィールドが編集可能で、どちらが読み取り専用なのかが視覚的にひと目でわかるようになります。

補足ポイント

:read-only の対となる擬似クラスとして、編集可能な要素を選択する :read-write も用意されています。両者を組み合わせることで、フォームの状態に応じた柔軟なスタイリングが可能です。主要なモダンブラウザでは広くサポートされているため、安心して利用できます。

  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