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

У меня есть следующая (упрощенная) структура 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. Когда у меня возникают ошибки проверки ModelState, среда MVC автоматически вставляет атрибут class="input-validation-error" в элемент, и таблица стилей выбирает этот класс, чтобы выделить элемент красным цветом. Однако это не работает для Telerik MVC Control (я полагаю, потому что javascript Telerik перезаписывает это).

Спасибо!


css css-selectors siblings
person Raymond    schedule 19.08.2011    source источник
comment
Принятый ответ на stackoverflow.com/questions/29662009/, вероятно, является лучшим решением этой проблемы, чем принятый здесь ответ, за исключением требования поддержки в IE8.   -  person Jules    schedule 17.05.2017
comment
Возможный дубликат CSS: выберите элемент, только если существует более поздний родственный элемент< /а>   -  person Jules    schedule 17.05.2017

Ответы (2)


arrow_upward
23
arrow_downward

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

Затем используйте селектор соседних элементов css, чтобы выбрать div, прилегающий к диапазону.

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

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

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>

person vanErp    schedule 19.08.2011

arrow_upward
1
arrow_downward

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

person Gerben    schedule 19.08.2011