title: Changing CSS on an element based on a different elements attributes
body: <p>I have an element that I want to display based on a different element having a "checked" attribute. I'm trying to figure out a way to do this with pure CSS. </p>
  
  <p>Any suggestions?</p>
  
  <p>The two elements are not siblings and do not have a parent-child relationship.</p>
  
  <p>This is what I have tried, but it doesn't seem to be doing anything.</p>
  
  <pre><code>#toolbar:checked ~ #filterToolbar {
      display:none;
  }
  </code></pre>
  
  <p>The <code>#toolbar</code> is a checkbox which should display or hide the <code>#filterToolbar</code> which is a toolbar on the page itself.</p>