CSS selector nếu tồn tại anh chị em liền kề

Question

Tôi có cơ cấu như sau (giản thể) 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> 

Những gì tôi muốn làm là thiết lập màu nền cho phụ huynh div.t-numerictextbox để có màu đỏ NẾU phần tử span cũng tồn tại. Cú pháp css để làm điều này có điều kiện chọn một anh chị em liền kề là gì?

BTW, tôi cần điều này đã làm việc cho IE 8.

nền, nếu bạn tò mò:

Tôi có một ứng dụng MVC asp.net và đang sử dụng Telerik MVC NumericTextBox Control. Khi tôi gặp lỗi xác thực ModelState, khung MVC sẽ tự động chèn thuộc tính class = "input-validation-error" vào phần tử và biểu định kiểu chọn lớp này để làm nổi bật phần tử màu đỏ. Tuy nhiên, nó không hoạt động cho điều khiển Telerik MVC (tôi giả sử vì javascript của Telerik ghi đè lên điều này).

Cảm ơn!

Answer 1

Có thể đặt khoảng cách trước div trong html và sau đó định vị nó bằng css.

Sau đó, sử dụng bộ chọn anh chị em lân cận css để chọn div liền kề với khoảng.

Cuối cùng, đặt một vị trí tuyệt đối trên khoảng, và cung cấp cho nó top:..px để đặt nó bên dưới div.

Vì vậy, bạn nhận được như sau:

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 không thể làm điều đó. Bạn có thể tạo kiểu cho span nếu div.t-numerictextbox tồn tại, nhưng không phải là cách khác. Đây là một hạn chế của css, nhưng có lẽ sẽ không bao giờ thay đổi.