CSS change when specific radio button is checked using :checked pseudo class - css

Question

The code below will allow me to alter the css of any sibling div element when the checkbox is checked:-
input[type="radio"]:checked ~ div{
display:none;
}
What i need to do is target a specific div either by its Id or its class when a specific radio button in the list is checked.
I want to try and to this Purely in CSS.
Ive tried doing this :-
input[type="radio"]:checked ~ #one.div{
display:none;
}
https://codepen.io/dyk3r5/pen/WOmxpV?editors=1111
<div class="container">
<input type="radio" id="opt1" name="radiolist" checked>
<label for='opt1'>New Account</label>
<input type="radio" id="opt2" name="radiolist">
<label for='opt2'>Existing Account</label>
<div id="one">Lorem Ipsum 1</div>
<div id="two">Lorem Ipsum 2</div>
</div>
html, body{
height :100%;
}
.container{
display:flex;
justify-content:center;
}
label{
color:#000;
font-weight:600;
height: 25px;
padding: 5px 10px;
border-bottom: 2px solid lightgrey;
margin: 5px 1px;
}
input[type="radio"]{
display:none;
}
input[type="radio"]:checked + label{
border-bottom: 2px solid red;
}
input[type="radio"]:checked ~ div{
display:none;
}

Answer 1

I updated the css to display the corresponding div when a certain radio button is selected. The problem is your selector for the div: #one.div. This targets the element with id "one" and class "div". It should be div#one instead.
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
}
label {
color: #000;
font-weight: 600;
height: 25px;
padding: 5px 10px;
border-bottom: 2px solid lightgrey;
margin: 5px 1px;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+label {
border-bottom: 2px solid red;
}
input[type="radio"]~div {
display: none;
}
input[type="radio"][id="opt1"]:checked~div#one,
input[type="radio"][id="opt2"]:checked~div#two {
display: block;
}
<div class="container">
<input type="radio" id="opt1" name="radiolist" checked>
<label for='opt1'>New Account</label>
<input type="radio" id="opt2" name="radiolist">
<label for='opt2'>Existing Account</label>
<div id="one">Lorem Ipsum 1</div>
<div id="two">Lorem Ipsum 2</div>
</div>