CODEWITHSUNDEEP
htmlcsssass
James Morrison
James Morrison

Reputation: 2122

Applying CSS to element when sibling input is disabled

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?

Upvotes: 4

Views: 2302

Answers (1)

roberrrt-s
roberrrt-s

Reputation: 8210

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>

Upvotes: 5

Related Questions