title: combination selector - Plus selector in css not working
body: <p>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, </p>
  
  <p>Please read the comment, in the code, as i said which line is giving the problem hint it's css last section, </p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;input  type="radio"  name="option" id="home" checked /&gt;
              &lt;input  type="radio"  name="option" id="about" /&gt;
  
              &lt;div class="navigation"&gt;
                  &lt;label for="home"  class="link"&gt;Home&lt;/label&gt;
                  &lt;label for="about" class="link"&gt;About Us&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div class="display"&gt;
                  &lt;div class="one"&gt;
                  &lt;h3&gt;This is first&lt;/h3&gt;
                  &lt;/div&gt;
  
                  &lt;div class="two"&gt;
                  &lt;h3&gt;This is second&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS CODE</strong></p>
  
  <pre><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 &gt; .one{
      display:block;
  }
  </code></pre>
  
  <p>if you want to run the code here is the code pen link <a href="https://codepen.io/arif_suhail_123/pen/KvdWey" rel="nofollow noreferrer">https://codepen.io/arif_suhail_123/pen/KvdWey</a></p>