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;
}
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
.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;
}
