Reputation: 2122
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
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