Having some checkboxes and labels, I'm using CSS to style the label when the checkbox is checked:
input[type=checkbox]:checked + .CheckLabels {background-color: green;}
When my HTML is structured like this:
<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>
<label class="CheckLabels" for="checkD">D</label>
Everything functions as expected: clicking the C label applies or removes the green style. However, if I place the label before the input, clicking the label affects the following label. For instance, clicking the C label applies or removes green from the D label (even though the correct checkbox is checked.)
<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkD">D</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>
Any idea why this is happening? The order of labels and checkboxes doesn't really matter to me since I'll be using display:none. It would just be helpful to understand what's happening here.