selettore CSS se esiste fratello adiacente

Question

Ho la seguente struttura (semplificato) 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> 

Quello che mi piacerebbe fare è impostare il colore di sfondo al genitore div.t-numerictextbox essere rosso se il esiste anche l'elemento span. Qual è la sintassi css per eseguire questa selezione condizionale su un fratello adiacente?

A proposito, ho bisogno di questo deve lavorare per IE 8.

sfondo, se siete curiosi:

Ho un'applicazione asp.net MVC e sto usando il Telerik MVC NumericTextBox controllo. Quando ho errori di convalida ModelState, il framework MVC inserisce automaticamente un attributo class = "input-validation-error" sull'elemento e il foglio di stile seleziona questo corso per evidenziare l'elemento in rosso. Tuttavia, non funziona per Telerik MVC Control (presumo perché il javascript di Telerik sovrascrive questo).

Grazie!

Answer 1

È possibile posizionare l'intervallo prima del div in html e quindi posizionarlo con css.

Quindi utilizzare un selettore fratello adiacente css per selezionare il div adiacente allo span.

Infine, posiziona una posizione assoluta sullo span e assegnagli uno top:..px per ottenerlo sotto il div.

Così si ottiene il seguente:

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 posso farlo. Puoi definire lo span se esiste il div.t-numerictextbox, ma non viceversa. Questa è una limitazione di css, ma probabilmente non cambierà mai.