Select a div that's not directly next or after a checkbox on :checked [duplicate]

This question already has an answer here:

• Is there a CSS parent selector? 26 answers

I just want to make a Filter box, so when you check the checkboxes they hide divs with info.

The problem here is that I don't know how to effect a div not related to the form itself.

I tried every ~, + and > selectors, none of them work.

If I need JavaScript to do this, could you explain me the JS code I need? Like what each line does, I have very basic JavaScript knowledge.

input#first:checked .div1{
  display: none;
}
input#second:checked .div2{
  display: none;
}
input#third:checked .div3{
  display: none;
}
.div1 {
  background-color: green;
  width: 30px;
  height: 30px;
  margin-top: 10px;
}
.div2 {
  background-color: red;
  width: 30px;
  height: 30px;
  margin-top: 10px;
}
.div3 {
  background-color: blue;
  width: 30px;
  height: 30px;
  margin-top: 10px;
}

.webpage_content {
  width: 500px;
  background-color: yellow;
  margin-top: 30px;
  margin-bottom: 30px;
}

<form>
  <input type="checkbox" id="first" name="first" value="first">
  <label for="first">&nbsp; Click to disable div1</label>
  
  <input type="checkbox" id="second" name="second" value="second">
  <label for="second">&nbsp; Click to disable div2</label>
  
  <input type="checkbox" id="third" name="third" value="third">
  <label for="third">&nbsp; Click to disable div2</label>
</form>


<div class="webpage_content">
  Imagine here's some more divs or ul.
</div>


<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>