combination selector - Plus selector in css not working

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:

1. The elements to be siblings
2. The selector on the left of + is the first positioned element
3. The selector on the right of + is the selector that follows.
4. 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>