title: Just first element within a list after selected radio
body: <p>I've got a sequence of radio button and then other dom-elements. Now I want to hide every element except the one right after the selected radio button.</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;div id="gallery" data-role="image-slider"&gt;
          &lt;input type="radio" /&gt;
          &lt;div class="image-slider-element"&gt;
              &lt;img src="" /&gt;
          &lt;/div&gt;
  
          &lt;input type="radio" /&gt;
          &lt;div class="image-slider-element"&gt;
              &lt;img src="" /&gt;
          &lt;/div&gt;
  
          &lt;input type="radio" checked="checked" /&gt;
          &lt;div class="image-slider-element"&gt;
              &lt;img src="" /&gt;
          &lt;/div&gt;
  
          &lt;input type="radio" /&gt;
          &lt;div class="image-slider-element"&gt;
              &lt;img src="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>[data-role="image-slider"] &gt; input[type="radio"] ~ .image-slider-element {
      display: none;
  }
  
  [data-role="image-slider"] &gt; input[type="radio"]:checked ~ .image-slider-element {
      display: block;
  }
  
  [data-role="image-slider"] img {
      height: 400px;
  }
  </code></pre>
  
  <p>The problem is, that (in this case) not only the 3rd element will be displayed, but the 4th anyway. So any idea, how I just can display that element right after the checked one and not all after this?</p>
  
  <p><code>[data-role="image-slider"] &gt; input[type="radio"]:checked ~ .image-slider-element:first-child</code> will not work, because <code>first-child</code> will relate only to the first element.</p>