title: CSS: how to select parent's sibling
body: <p>I have the following HTML in my page.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul id="detailsList"&gt;
      &lt;li&gt;
          &lt;input type="checkbox" id="showCheckbox" /&gt;
          &lt;label for="showCheckbox"&gt;Show Details&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;content ...&lt;/li&gt;
      &lt;li&gt;content ...&lt;/li&gt;
      &lt;li&gt;content ...&lt;/li&gt;
      &lt;li&gt;content ...&lt;/li&gt;
      &lt;li&gt;content ...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am unable to change this HTML. I have hidden all LI's with the exception of the first by using the following CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>ul#detailsList li:nth-child(1n+2) {
      display:none;
  }
  </code></pre>
  
  <p>So far so good. What I want to do now is to show those hidden LI's when the the checkbox is ticked, using pure CSS. My best attempt so far is</p>
  
  <pre class="lang-css prettyprint-override"><code>ul#detailsList li input#showCheckbox:checked + li {
      display:block;
  }
  </code></pre>
  
  <p>Obviously this doesn't work, as the <strong>+ li</strong> will only select LI's immediately after the checkbox (i.e. siblings), not siblings of the parent.</p>
  
  <p>Is this even possible?</p>