CSS のみを使用して、チェックボックスのステータスに基づいてラベルのスタイルを設定するにはどうすればよいですか?

JavaScript を使用しないチェックボックスのステータスに基づいたラベルのスタイル

Web 開発の多くのシナリオでは、ユーザー入力に基づいて情報を表示する必要があります。一般的な例の 1 つは、対応するチェックボックスがオンまたはオフになっているときにラベルの外観を切り替えることです。 JavaScript はこれを実現する簡単な方法を提供しますが、この記事では純粋な CSS ソリューションを検討します。

隣接兄弟コンビネータ

このテクニックの鍵は、隣接兄弟コンビネータ ( ) にあります。このセレクターを使用すると、論理 DOM ツリー内の別の要素に隣接し、その前にある要素をターゲットにすることができます。この例では、チェックボックスの直後にあるラベル要素をターゲットにします。

次の HTML 構造を考えてみましょう。

<div>
  <input type="checkbox" class="check-with-label"><h3 id="ラベルのスタイルを設定する">ラベルのスタイルを設定する</h3>
<p>次に、隣接兄弟コンビネータを使用すると、その前のチェックボックスがオンになっている場合にのみラベル要素を対象とする CSS ルールを作成できます。 selected:</p>
<pre class="brush:php;toolbar:false">.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

このルールは、チェック状態にあるクラス "check-with-label" を持つ要素には、スタイルが設定されたクラス "label-for-check" を持つ隣接する兄弟要素があることを示します。太字のフォントの太さ。

例:

これらの CSS ルールを指定されたHTML の例は次のようになります:

<div>
  <input type="checkbox" class="check-with-label"><pre class="brush:php;toolbar:false">.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

出力:

My Label (bold)

この場合、「My Label」が表示されます。前のチェックボックスがチェックされているため太字になっており、この純粋な CSS テクニックがチェックボックスのステータスに基づいてラベルの外観を正常に変更していることを示しています。