Applying CSS to element when sibling input is disabled

Question

I'm having an issue trying to apply styling to a sibling element.

.ac_numeric input[type=text][disabled] {
  cursor: not-allowed;
}

<div class="ac_numeric">
  <input type="text" />
  <div class="numericbuttonswrapper">
    <div class="numericupbutton"></div>
    <div class="numericdownbutton"></div>
  </div>
</div>

This all works fine, applying the "not-allowed" cursor to my input when it's disabled but I also need to add the cursor to my div with class="numericbuttonswrapper" when the input is disabled.

I can't find the answer when going through the available css selectors, is this possible?

Answer 1

Use the adjacent sibling selector (+)

.ac_numeric input[type=text][disabled],
.ac_numeric input[type=text][disabled] + .numericbuttonswrapper {
    cursor: not-allowed;
}

.ac_numeric input[type=text][disabled],
.ac_numeric input[type=text][disabled] + .numericbuttonswrapper {
    cursor: not-allowed;
}

<div class="ac_numeric">
      <input disabled type="text" />
      <div class="numericbuttonswrapper">
          <div class="numericupbutton">test</div>
          <div class="numericdownbutton">testing2</div>
      </div>
</div>