How to hide an element if radio button is checked?

Say I have Radio Buttons and a Div.

<input id="one" type="radio" value="1">
<label>One</label> 
<input id="two" type="radio" value="2">
<label>Two</label> 

<div id="mainDiv">
<p>Hello</p>
</div>

How do I hide the div block only if radiobutton one is checked? Without using any other language and only css.

I tried to use + and ~. I dont know if im using it wrong but it didnt work.

Solution

You can use the checked property of the one radio button together with the ~ combinator:

#one:checked ~ #mainDiv {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
  <style>
    #one:checked ~ #mainDiv {
      display: none;
    }
  </style>
</head>
<body>
  <input id="one" type="radio" name="myRadioGroup" value="1">
  <label for="one">One</label>
  <input id="two" type="radio" name="myRadioGroup" value="2">
  <label for="two">Two</label>

  <div id="mainDiv">
    <p>Hello</p>
  </div>
</body>
</html>

Also, you can check the example from documentation MDN Toggling elements with a hidden checkbox