selector CSS si existen hermanos adyacentes

Question

tengo la siguiente estructura (simplificado) 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> 

Lo que me gustaría hacer es establecer el color de fondo al padre div.t-numerictextbox ser rojo si el el elemento span también existe. ¿Cuál es la sintaxis css para hacer esta selección condicional en un hermano adyacente?

Por cierto, necesito esto tiene que trabajar para IE 8.

fondo, si usted es curioso:

Tengo una aplicación MVC asp.net y estoy usando el control MVC NumericTextBox Telerik. Cuando tengo errores de validación de ModelState, el framework MVC inserta automáticamente un atributo class = "input-validation-error" en el elemento, y la hoja de estilos elige esta clase para resaltar el elemento en rojo. Sin embargo, no funciona para Telerik MVC Control (supongo que porque el javascript de Telerik sobrescribe esto).

Gracias!

Answer 1

Es posible colocar el tramo antes del div en el html, y luego colocarlo con css.

A continuación, utilice un selector de hermanos adyacente css para seleccionar el div adyacente al tramo.

Finalmente pon una posición absoluta en el tramo, y dale un top:..px para obtenerlo debajo del div.

para que pueda obtener lo siguiente:

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 no puede hacer eso. Puede diseñar el tramo si existe el div.t-numerictextbox, pero no al revés. Esta es una limitación de css, pero probablemente nunca cambiará.