CSSを使用して特定の属性を持つ要素を指すラベルをスタイル設定する

Question

ASP.Net MVC3アプリケーションで控えめな検証を使用しています。私は、のラベル要素を、必要な要素に特定の方法で関連付けるようにしたいと思います。

私の関心は、必要なフィールド自体の周りの視覚的な指標を微調整することではなく、この要素の属性に基づいて異なる要素の外観を変更することはありません。

[data-val-required]属性を持つすべての要素にセレクタが適用されたCSSルールを使用することで、CSSだけで要素自体をスタイルすることができると思います。

input[data-val-required] { color: red; } 

しかし、ラベルをスタイルすることは可能ですか？ CSSルールがすべてラベル要素に適用され、for属性が[data-val-required]属性を持つinput要素を指している（CSSセレクタを使用して）と言うと、

現在、jQueryを少し使ってスタイリングを適用しています。うまく動作します。しかし、CSSルールを設定してやるだけでもいいですね。

Answer 1

ここからはアクセスできません。 @vlgalikによれば、唯一のCSSオプションは、1）一部のブラウザではサポートされていないセレクタ、2）他の要素を見つける能力が限られているため、マークアップを作成して遵守する必要があります。

したがって、現在のソリューション（JQueryを使用してラベルと対応する入力を見つけること）が最適です。

しかし、私は逆方向にアプローチします：まず、input[data-val-required]に一致するすべての入力を探し、それらのIDを取得し、対応するラベルlabel[for="<id-from-input>"]を選択します。仕事が少なくなる。しかしそれは最適化です。ページに多くのラベルや入力がない場合は、いずれの方向にも問題ありません。

Answer 2

このjsfiddle example is using CSS3 selectorsがありますが、HTMLの入力要素の後にラベルを付けなければならないという欠点があります（例のように追加CSSを使用する前に配置することができます）。

のようなラベル要素のクラス属性を与えることであろうはるかに簡単かつ効果的：

<label class="required"> 

かのdiv要素にラベル入力ペアを配置する：

<div class="required"> 
    <label for="input1">Label 1</label> 
    <input id="input1" ... /> 
</div> 

とが希望するCSSスタイルを適用します単純に：

.required label { 
    ... 
} 

Answer 3

あなたが与えた例は、あなたがする必要があるもの。これを使用してみてください：

input[for=data-val-required]{} 

このセレクタは、指定したタグの属性をベースにしています。それはあなたが探しているものを与えるはずです。