CSS селектор, если существует соседний брат - PullRequest
Новая
       27

CSS селектор, если существует соседний брат

10 голосов
/ 19 августа 2011

У меня есть следующая (упрощенная) структура 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>

То, что я хотел бы сделать, это установить цвет фона для родительского div.t-numerictextbox на красный, если элемент span также существует. Каков синтаксис CSS, чтобы сделать этот условный выбор на соседнем брате?

Кстати, мне нужно, чтобы это работало для IE 8.

Фон, если вам интересно:

У меня есть приложение asp.net MVC, и я использую Telerik MVC NumericTextBox Control. Когда у меня возникают ошибки проверки ModelState, платформа MVC автоматически вставляет в элемент атрибут class = "input-validation-error", и таблица стилей выбирает этот класс, чтобы выделить элемент красным цветом. Тем не менее, он не работает для Telerik MVC Control (я полагаю, потому что javascript Telerik перезаписывает это).

Спасибо!

Ответы [ 2 ]

18 голосов
/ 19 августа 2011

Можно поместить span перед div в html, а затем расположить его с помощью css.

Затем с помощью селектора смежных сестер css выберите div рядом с span.

Наконец, поместите абсолютную позицию на промежуток и дайте ей top:..px, чтобы получить ее ниже деления.

Итак, вы получите следующее: 

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>
1 голос
/ 19 августа 2011

CSS не может этого сделать.Вы можете стилизовать диапазон, если div.t-numerictextbox существует, но не наоборот.Это ограничение CSS, но, вероятно, никогда не изменится.

...