Hiding label of radiobutton after clicking and never show it again (html/css only)

I want a label for a radio button (#green) to appear when I select a certain checkbox (#red). Ok, this was not much of a problem. But what I wanted furthermore is, that after clicking the label, #green should be checked and the label should disappear ... and shall never come back, not even when #green is not checked anymore.

I thought about the following condition: the label is only visible when #red is checked and has :focus. But unfortunately the :focus of #red is lost BEFORE the click is applied to #green, so #green is never checked.

Here's the code:

input + label {
  position: absolute;
  top: 100px;
  width: 100px;
  height: 100px;
}

#red + label {
  background-color: #FF0000;
  left: 100px;
}

#green + label {
  display: none;
  background-color: #00FF00;
  left: 200px;
}

#blue + label {
  display: none;
  background-color: #0000FF;
  left: 300px;
}

#blue:checked + label {
  display: block;
}

#red:checked + label {
  display: none;
}

#red:checked:focus ~ #green + label     {
  display: block;
}

<input id="red" type="checkbox">
<label for="red" tabindex="3"></label>

<input id="green" type="radio" name="radios">
<label for="green" tabindex="1"></label>

<input id="blue" type="radio" name="radios" checked>
<label for="blue" tabindex="2"></label>

So, after clicking the red square, a green square should appear. And after clicking the green square, the green square and the blue square should disappear.

I hope somebody can help!