lundi 14 mars 2016

highlight a label which goes before a checkbox if checkbox is checked

I have a problem to highlight a label which goes before a checkbox (Case #1). I use this code, but for some reason, the highliting is not working here:

Case #1

HTML
<label class="mylabel">My Label</label>
<input type="checkbox" class="mycheck" />

CSS
.mylabel + .mycheck:checked {
  font-weight: bold;
}

At the same, if a label goes after a checkbox (Case #2) then the label is highlighted successfully:

Case #2

HTML
<input type="checkbox" class="mycheck" />
<label class="mylabel">My Label</label>


CSS
.mycheck:checked + .mylabel {
  font-weight: bold;
}

I am intresed only in a non-javascript way of highlighting a label which goes before a checkbox. What is wrong with the Case #1?




Aucun commentaire:

Enregistrer un commentaire