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 interested only in a non-javascript way of highlighting a label which goes before a checkbox. What is wrong with the Case #1?

Answers


This happens because + selector selects the next element (in other words + is scanning the element's siblings in HTML which are declared later than current one and gets the first match) and in fact you assign font-weight: bold; on a checkbox which is funny but not what you expect. CSS doesn't have a previous selector (in other words there is no selector to scan the element's siblings in HTML which are declared before current one), so the thing you ask is not really achievable.

The only way is to display the element before the checkbox, e.g. assigning float: left to the label and float: right to the checkbox. But still, the order of the elements in HTML must be the following:

  1. checkbox
  2. label

Need Your Help

Rewrite and redirect this url using htaccess

apache .htaccess mod-rewrite url-rewriting

I would like to rewrite and redirect the following url:

How to implement surveygizmo api in asp.net MVC3

asp.net asp.net-mvc

I am trying to implement SuveyGizmo api in my application but I don't know how to start it. In the development corner(REST API) in SurveyGizmo site they have just given some urls to get, post and d...