CSSセレクタ隣接兄弟が存在する場合

Question

私は、次の（簡体字）HTMLの構造を持っている

<td> 
    <DIV class="t-numerictextbox"> 
     <DIV class="t-formatted-value">$0.00</DIV> 
     <INPUT id="MyObj_PropertyName class="t-input" name="MyObj.PropertyName"> 
    </DIV> 
    <SPAN class="field-validation-error" data-valmsg-for="MyObj.PropertyName">blah blah</SPAN> 
</td> 

私はIF赤いする親div.t-numerictextboxに背景色を設定してくださいしたいと思いますどのようなスパン要素も存在する。隣接する兄弟にこの条件付き選択を行うためのCSS構文は何ですか？

私はasp.net MVCアプリケーションを持っており、Telerik MVC NumericTextBoxコントロールを使用しています：

はところで、私はあなたが興味があれば、これはIE 8のため

背景を動作するように持っている必要があります。 ModelState検証エラーが発生すると、MVCフレームワークは自動的に要素にclass = "input-validation-error"属性を挿入し、スタイルシートはこのクラスを選択して要素を赤で強調表示します。しかし、TelerikのMVCコントロールでは機能しません（Telerikのjavascriptがこれを上書きするので、私は推測します）。

ありがとうございます！

Answer 1

divの前にスパンを配置し、cssで配置することができます。

次に、隣接する兄弟セレクタを使用して、スパンに隣接するdivを選択します。

最後に、spanに位置絶対値を入力し、top:..pxを入力してdivの下に置きます。

だから、次を得る：

span + div { 
 
    background-color:red; 
 
}

<td> 
 
    <span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span> 
 
    <div class="t-numerictextbox"> 
 
    <div class="t-formatted-value">$0.00</div> 
 
    <input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName"> 
 
    </div>   
 
</td>

Answer 2

CSSはそれを行う傾けます。 div.t-numerictextboxが存在する場合にはスパンをスタイルすることができますが、逆の方法はありません。これはCSSの制限ですが、決して変更されることはありません。