css - クラス foo を持つ任意の要素のラベルの CSS セレクター

Question

コードは次のようになります

<label for="bar">Baz: <input type="text" name="bar" id="bar" class="foo"/></label>

ラベルのスタイルを設定したいのですが、CSS で選択するにはどうすればよいですか?

Answer 1

現在、css のみを使用して親要素を選択する方法はありません。これは、次のcss 4で可能になります(andyB に感謝します)。

したがって、他に 2 つのオプションがあります。

1. スタイルを設定できるように、親にハンドルがあるように html を変更します。

2. javascript を使用して、子の css/id/name 属性に基づいて親を選択します。

Answer 2

そのようです：

label[for="bar"] { color: red; }

これにより、「バー」のラベルがターゲットになります。これは CSS2.1 セレクターであり、IE6 以外のすべてで機能します。

jsFiddle の例を参照してください: http://jsfiddle.net/TheNix/kTwDN/