Css stops working when I add a class of a checkbox's label [duplicate]

Question

I'm really sorry, I know this is a very basic question.

The code works fine, except if I try to apply the attribute to another object, in this case a label. class "c". I don't understand why such a basic thing is not working.

HTML:

 <button type="button" id="boton" disabled>hi</button>
 <input type="checkbox" id="checky"/>
 <label class="c" id="checkyl" for="checky">etiquette</label>

CSS:

#boton:disabled:hover + .c {
  font-weight: bold;
}

Answer 1

You are probably looking for the general sibling selector ~

#boton:disabled:hover~.c {
  font-weight: bold;
}

<button type="button" id="boton" disabled>hi</button>
<input type="checkbox" id="checky" />
<label class="c" id="checkyl" for="checky">etiquette</label>

The adjacent sibling selector + won't work in this case because .c does not come directly after #boton

Answer 2

.c1 + .c2 {
  /* styles here  */
}

the above selector selects element with class c2 which is just after the element with class .c1

.c1 ~ .c2 {
  /* styles here  */
}

This selector selects element with class c2 which is sibling if the element with class .c1

In your case you need to use sibling(~) selector instead of adjacent-sibling(+) selector

#boton:disabled:hover~.c {
  font-weight: bold;
}