Difficulty with checkbox hack syntax - html

Question

I want to both style a label and reveal a div when a checkbox is checked. I have found ways to do one or the other, but not both, and I don't understand why. Note the CSS is the exact same in both examples and is:
input {
display: none
}
.layerpic {
height: 100px;
width: 100px;
background: red;
opacity: 1;
float: left;
}
label {
clear: none;
float: left;
}
.xyz input:checked + .layerpic{
opacity: 0.5;
}
.xyz input:checked + label {
font-weight: bold;
}
Now the HTML. This example allows the div to be affected, but not the label. Note the only difference is in the html where the label comes before the input:
<div class ="xyz">
<label class="ribs" for="hider2">Hide layer</label>
<input type="checkbox" id="hider2">
<div class="layerpic"> hi
</div>
</div>
This example allows the label to be affected, but not the div:
<div class ="xyz">
<input type="checkbox" id="hider2">
<label class="ribs" for="hider2">Hide layer</label>
<div class="layerpic"> hi
</div>
</div>
Can anyone explain why different elements are affected just by flipping which HTML comes first, and is it possible to have both elements affected when the checkbox is checked?

Answer 1

You need to rearrange your HTML, then use + and ~ selectors
input {
display: none
}
.layerpic {
height: 100px;
width: 100px;
background: red;
opacity: 1;
float: left;
}
label {
clear: none;
float: left;
}
.xyz input:checked+.layerpic {
opacity: 0.5;
}
.xyz input:checked~label {
font-weight: bold;
}
<div class="xyz">
<input type="checkbox" id="hider2">
<div class="layerpic"> hi</div>
<label class="ribs" for="hider2">Hide layer</label>
</div>