Using the code snippet below, I can modify the CSS of any adjacent div element when a checkbox is selected:-
input[type="radio"]:checked ~ div{
display:none;
}
My goal is to target a specific div by either its Id or class when a particular radio button is checked.
I am attempting to achieve this using only CSS.
I have tried the following approach:-
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;
}