How to style an element based on another element changes without JavaScript? - html

Question

I have to style an input control based on the select box's class. If select box has a class "error", then I need a red border on the input control. How can I do that with SASS ? There is no common wrap, only one thing is that the wrap of the input control (.select-input-wrap) is adjecent to select box. Here is the DOM structure.
<select class="form-select error"></select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>

Answer 1

You need to style a sibling element, try the below code in your SASS file.
$red: #f00;
.error {
&.form-select {
+ .select-input-wrap {
> .select-input {
border: 1px solid $red;
}
}
}
}

Answer 2

In pure CSS (and so in SASS), you can target sibling elements using the + operator. For instance:
.form-select.error + .select-input-wrap input {
border: 3px solid red;
}
Related sandbox: http://www.cssdesk.com/r8Dh8

Answer 3

If your select and div elements share a parent, you can style based on that:
.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>
For the SASS version, just take out the extra punctuation!

Answer 4

This is a css solution. Hope you can convert to sass structure.
.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>