CSS选择器如果存在邻近兄弟 [英] CSS selector if exist adjacent sibling

问题描述

我有以下（简化的）HTML结构

：

 < td& 
< DIV class =t-numerictextbox> 
< DIV class =t-formatted-value> $ 0.00< / DIV> 
< INPUT id =MyObj_PropertyName class =t-inputname =MyObj.PropertyName> 
< / DIV> 
< SPAN class =field-validation-错误data-valmsg-for =MyObj.PropertyName> blah blah< / SPAN> 
< / td> 
  

我想做的是将背景颜色设置为父div.t-numerictextbox为红色如果span元素也存在。什么是css语法做这个条件select on一个相邻的兄弟姐妹？

BTW，我需要为IE 8工作。

're curious：

我有一个asp.net MVC应用程序，并使用Telerik MVC NumericTextBox控件当我有ModelState验证错误时，MVC框架自动插入一个类=input-validation-error属性，样式表选择这个类来突出显示该元素为红色，但是它不适用于Telerik MVC Control（我假设因为Telerik的javascript覆盖了这个） / p>

谢谢！

解决方案

在html中的div，然后用css定位。

所以你得到以下结果：

 < td> 
< SPAN class =field-validation-errordata-valmsg-for =MyObj.PropertyName> blah 
 blah< / SPAN> 
< DIV class =t-numerictextbox> 
< DIV class =t-formatted-value> $ 0.00< / DIV> 
< INPUT id =MyObj_PropertyNameclass =t-inputname =MyObj.PropertyName> 
< / DIV> 
< / td> 
  

然后使用css adjecent sibling选择器选择span的div附件：

  span + div {
 background-color：red; 
} 
  

最后在span上放一个绝对位置，给它一个 top：.. px ，将其放在div

下面

I have the following (simplified) HTML structure

<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>

What I'd like to do is set the background color to the parent div.t-numerictextbox to be red IF the span element also exist. What is the css syntax to do this conditional select on an adjacent sibling?

BTW, I need this has to work for IE 8.

Background, if you're curious:

I have an asp.net MVC application and am using the Telerik MVC NumericTextBox Control. When I have ModelState validation errors, the MVC framework automatically inserts a class="input-validation-error" attribute on the element, and the stylesheet picks this class up to highlight the element in red. However, it doesn't work for the Telerik MVC Control (I assume because Telerik's javascript overwrites this).

Thanks!

解决方案

It is possible to place the span before the div in the html, and then position it with css.

So you get the following:

<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>

Then use a css adjecent sibling selector to select the div adjecent to the span:

span + div {
   background-color:red;
}

finally put a position absolute on the span, and give it a top:..px to get it below the div

这篇关于CSS选择器如果存在邻近兄弟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！