Как стилизовать элемент на основе изменений другого элемента без JavaScript?

Question

Я должен стилизовать элемент управления вводом на основе класса блока выбора. Если в поле выбора есть класс «error», то мне нужна красная граница на элементе управления вводом. Как я могу сделать это с SASS? Обычного переноса не существует, только одно состоит в том, что перенос элемента управления вводом (.select-input-wrap) подходит для поля выбора. Вот структура DOM.

<select class="form-select error"></select>
<div class="select-input-wrap">
  <input class="select-input" name="select-input" />
</div>

Answer 1

В чистом CSS (и так же в SASS) вы можете настроить таргетинг на элементы одного уровня с помощью оператора +. Например:

.form-select.error + .select-input-wrap input {
    border: 3px solid red;
}

Связанная песочница: http://www.cssdesk.com/r8Dh8

Answer 2

Вам нужно стилизовать элемент родного брата, попробуйте следующий код в вашем файле SASS.

$red: #f00;

.error {

  &.form-select {

    + .select-input-wrap {

      > .select-input {
        border: 1px solid $red;
      }
    }
  }
}

Answer 3

Это решение CSS. Надеюсь, вы сможете преобразовать в sass структуру.

.error~.select-input-wrap input{
  border: solid 1px red;
}

<select class="form-select error"></select>
<div class="select-input-wrap">
  <input class="select-input" name="select-input" />
</div>

Answer 4

Если ваши элементы select и div имеют общего родителя, вы можете использовать стиль на основе этого:

.parent .error + .select-input-wrap input {
  border: 1px solid red;
}

<div class="parent">
  <select id="some-sel" class="form-select error">  </select>
  <div class="select-input-wrap">
    <input class="select-input" name="select-input" />
  </div>
  
    <select id="another-sel" class="form-select">  </select>
  <div class="select-input-wrap">
    <input class="select-input" name="select-input" />
  </div>
</div>

Для версии SASS просто уберите лишнюю пунктуацию!