title: Selecting nested elements of checked radio button with CSS only
body: <p>I am trying to use CSS to select some elements base on <code>radio</code> button state.</p>
  
  <p>What I would like to do is if a certain <code>radio</code> button is checked I want to go down a couple levels and <code>unhide</code> an overlay so that the user can interact with the disabled <code>radio</code> buttons.</p>
  
  <p>I know you can use sibling selectors like <code>~</code> and <code>&gt;</code> to select siblings of the current <code>div</code>, but how would I select a parent element of a <code>checked</code> radio button and then traverse down the DOM to find my desired selector?</p>
  
  <p>I can easily do this with JS but I would prefer CSS if it is possible.</p>
  
  <p>Here is a <a href="http://codepen.io/anon/pen/oLXgGe" rel="nofollow">CodePen</a></p>
  
  <p>You can see that I have four <code>radio</code> buttons. Two of which are indented slightly. </p>
  
  <p>What I would like to accomplish is if someone selects the <strong>Testing2</strong> <code>radio</code> I want the <code>.overlay</code> that contains the <code>opacity</code> to be set to <code>display: none</code>.</p>
  
  <p>I need to also maintain the same structure without reorganizing the HTML.</p>
  
  <p>Using sibling selectors are relatively new to me so I am probably not using them correctly in this case.</p>
  
  <p>I have tried:</p>
  
  <pre><code> #radio-1:checked ~ .overlay {
        display: none;
      }
  
      #radio-1:checked &gt; .radio-bump &gt; .radio-group-2 ~ .overlay {
        display: none;
      }
  </code></pre>
  
  <p>Here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.overlay {
    background: #fff;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.7;
  }
  .radio-group-2 {
    position: relative;
  }
  .radio-bump {
    margin-left: 20px;
  }
  #radio-1:checked ~ .overlay {
    display: none;
  }
  #radio-1:checked &gt; .radio-bump &gt; .radio-group-2 ~ .overlay {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main-container"&gt;
    &lt;div class="shipping-container"&gt;
      &lt;div class="radio"&gt;
        &lt;input type="radio" id="radio" name="radio-group-1"&gt;
        &lt;label for="radio"&gt;Testing1&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="radio-1"&gt;
        &lt;input type="radio" id="radio-1" name="radio-group-1"&gt;
        &lt;label for="radio-1"&gt;Testing2&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="radio-bump"&gt;
        &lt;div class="radio-group-2"&gt;
          &lt;div class="overlay"&gt;&lt;/div&gt;
          &lt;div class="radios"&gt;
            &lt;input type="radio" id="radio-2" name="radio-group-2"&gt;
            &lt;label for="radio-2"&gt;Testing3&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radios"&gt;
            &lt;input type="radio" id="radio-3" name="radio-group-2"&gt;
            &lt;label for="radio-3"&gt;Testing4&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>