html - combination selector - Plus selector in css not working -
may don't understand plus selector, want, when user click on radio button home, div 1 should displayed, , when user click on radio button about, div 2 should displayed, did not work, strip down code, problem, code accepted div 1 displayed home default checked. did not happened, know problem dont know why,
please read comment, in code, said line giving problem hint it's css last section,
html code
<div class="container"> <input type="radio" name="option" id="home" checked /> <input type="radio" name="option" id="about" /> <div class="navigation"> <label for="home" class="link">home</label> <label for="about" class="link">about us</label> </div> <div class="display"> <div class="one"> <h3>this first</h3> </div> <div class="two"> <h3>this second</h3> </div> </div> </div>
css code
.navigation {margin-top:20px;} .link{cursor:pointer;} /*making div display*/ .one,.two{ display:none; } /* ###this line not working## want display div, if user click on radio button */ #home:checked +.container > .one{ display:block; }
if want run code here code pen link https://codepen.io/arif_suhail_123/pen/kvdwey
.container
not sibling of #home
.
to select element in question, when #home
checked, can use ~
, general sibling selector:
#home:checked ~ .display > .one
.navigation {margin-top:20px;} .link {cursor:pointer;} .one, .two { display:none; } #home:checked ~ .display > .one { display:block; } #about:checked ~ .display > .two { display: block; }
<div class="container"> <input type="radio" name="option" id="home" checked /> <input type="radio" name="option" id="about" /> <div class="navigation"> <label for="home" class="link">home</label> <label for="about" class="link">about us</label> </div> <div class="display"> <div class="one"> <h3>this first</h3> </div> <div class="two"> <h3>this second</h3> </div> </div> </div>
Comments
Post a Comment