title: CSS Selector for table cell with checked input in previous cell
body: <p>I need to select a table cell if the previous cell has a checked input. the I have a sneaking suspicion that this is not possible with CSS, can anybody confirm?</p>
  
  <p>Here is an example:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;Row with checked input&lt;/td&gt;
          &lt;td&gt;&lt;input type=checkbox checked /&gt;&lt;/td&gt;
          &lt;td&gt;should show.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row with unchecked input&lt;/td&gt;
          &lt;td&gt;&lt;input type=checkbox /&gt;&lt;/td&gt;
          &lt;td&gt;should be hidden.&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the CSS I tried:</p>
  
  <pre><code>td:last-child { display:none; }
  input:checked ~ td:last-child { display:initial; }
  </code></pre>
  
  <p>The first selector works to hide unchecked inputs, but then the second selector cannot make the input show up again. I assume the <code>~</code> combinator cannot handle children of previous siblings. Is there any way to get around this using CSS, or do I need to use some JavaScript solution?</p>
  
  <p><a href="http://jsfiddle.net/Y4P5W/" rel="nofollow">JSFiddle</a> for those who want a live scratchpad.</p>