Changing div colour with label and checkboxes

I am trying to change the colour of the item1 div by checking the labels and it's inputs. For some reason, it only works when you check the first two checkboxes but not the last one. Can you please explain why is this happenning?

  <style type="text/css">
     .item1 {
     width: 100px;
     height: 100px;
     }
     #item-1:checked + label .item1 {
     background: red;
     } 
     #item-2:checked + label .item1 {
     background: blue;
     }
     #item-3:checked + label .item1 {
     background: purple;
     }
  </style>


  <label for="item-1"> label 1
  <input type="checkbox" name="" id="item-1">
  <label for="item-2"> label 2
  <input type="checkbox" name="" id="item-2">
  <label for="item-3"> label 3
  <input type="checkbox" name="" id="item-3">
  <div class="item1">
  </div>