Difficulty with checkbox hack syntax

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?