combination selector - Plus selector in css not working - html

Question

May be i don't understand fully plus selector,
What i want, when user click on radio button home, div one should get displayed,
and when user click on radio button about, div two should get displayed, it did not work,
So i strip down the code, where is the problem, with this code i accepted div one to get displayed as home is by default checked. But it did not happened, so i know where is the problem but i dont know why,
Please read the comment, in the code, as i said which line is giving the 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 is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
CSS CODE
.navigation {margin-top:20px;}
.link{cursor:pointer;}
/*making div display*/
.one,.two{
display:none;
}
/*
###This line is not working## want to display div, if user click on radio
button
*/
#home:checked +.container > .one{
display:block;
}
if you want to run the code here is the code pen link https://codepen.io/arif_suhail_123/pen/KvdWey

Answer 1

.container is not a sibling of #home.
To select the element in question, when #home is checked, you can use the ~, which is the 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 is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>

Answer 2

The + is the adjacent sibling combinator. Which requires:
The elements to be siblings
The selector on the left of + is the first positioned element
The selector on the right of + is the selector that follows.
There must be no other elements between them.
In the following demo:
Each radio was moved in front of the div it's associated with.
Each radio is display:none since there's no need to show them because the interface are the labels.
Demo
input[name='option'],
.one,
.two {
display: none
}
#home:checked+.one {
display: block;
}
#about:checked+.two {
display: block;
}
<div class="container">
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<input type="radio" name="option" id="home" checked />
<div class="one">
<h3>This is first</h3>
</div>
<input type="radio" name="option" id="about" />
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>

Answer 3

I believe for the plus operator to work the element has to be the immediate next sibling - So in this case the .one div would have to immediately follow the #home label, and the css would have to be:
#home:checked + .one{
display:block;
}
The html:
<div class="container">
<input type="radio" name="option" id="home" checked />
<div class="one">
<h3>This is first</h3>
</div>
<input type="radio" name="option" id="about" />
...

Answer 4

+ Selector : The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.
~ Selector : The element1~element2 selector matches occurrences of element2 that are preceded by element1.
So,you must use ~ instead of +.
.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">
Home: <input type="radio" name="option" id="home" checked />
About: <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 is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>

Answer 5

The order of elements is important when using this selector.
So to use the ~ operator the element should be after the first part.
Ex.
input[type=radio]:checked ~ label {
display: none;
}
The Html should be:
<div class="radio-groupe">
<input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
<label for="choice-2">More</label>
</div>
and not:
<div class="radio-groupe">
<label for="choice-2">More</label>
<input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
</div>