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

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

Isn't "+" for immediately after? (There's in input in-between the elements) — circusdei, Aug 29 '18 at 18:36

score 4 · Accepted Answer · answered Aug 29 '18 at 18:36

4

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

answered Aug 29 '18 at 18:36

ksav

20,015
6
46
66

I thought that + was for a specific element and ~ for elements inside the one being used. Thank you, you've been really kind. – M.M. Aug 29 '18 at 20:12
No problem. You should have a look here for a fun little game based on CSS selectors https://flukeout.github.io/# – ksav Aug 30 '18 at 09:30

score 2 · Answer 2 · answered Aug 29 '18 at 18:58

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

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

2 Answers2