title: Can I affect an element outside the div I am currently in purely with CSS?
body: <p><strong>Context</strong>: I am attempting to use the <strong>radio hack</strong> to toggle what text is viewed within the <code>.tabinfo</code> div, but my radios and the text whose <code>display</code> attribute I want to change are located in different divs.</p>
  <p><strong>Problem</strong>: Is it possible to use pure CSS selectors to select the <code>#text</code> element by clicking on a nested radio?</p>
  <p><strong>Reference Code</strong>: I am using the bootstrap layout and have created the following HTML code:</p>
  <pre><code>&lt;div class=&quot;col-xs-2&quot;&gt;
      &lt;input id=&quot;tab1&quot; type=&quot;radio&quot; name=&quot;tabs&quot;&gt;
      &lt;label for=&quot;tab1&quot;&gt;Foo&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-xs-2&quot;&gt;
      &lt;input id=&quot;tab2&quot; type=&quot;radio&quot; name=&quot;tabs&quot;&gt;
      &lt;label for=&quot;tab2&quot;&gt;Bar&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-xs-2&quot;&gt;
      &lt;input id=&quot;tab3&quot; type=&quot;radio&quot; name=&quot;tabs&quot; checked&gt; 
      &lt;label for=&quot;tab3&quot;&gt;Foo Bar&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-xs-12&quot;&gt;
      &lt;div class=&quot;tabinfo&quot;&gt;
          &lt;div id=&quot;text1&quot;&gt;
          &lt;/div&gt;
          &lt;div id=&quot;text2&quot;&gt;
          &lt;/div&gt;
          &lt;div id=&quot;text3&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And the following CSS:</p>
  <pre><code>label {
      border: solid;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      border-bottom: none;
      border-color: rgb(211,211,205);
      border-width: 2px;
      color: rgb(12,174,175);
      background-color: rgb(247,247,247);
  }
  
  input:checked + label {
      background-color: #fff;
      color: rgb(94,94,94);
  }
  
  label:hover {
      cursor: pointer;
  }
  
  .tabinfo {
      border: solid;
      border-color: rgb(211,211,205);
      border-width: 2px;
      border-top-right-radius: 10px;
  }
  
  #tab1:checked ~ .col-xs-12 .tabinfo #text1,
  #tab2:checked ~ .col-xs-12 .tabinfo #text2,
  #tab3:checked ~ .col-xs-12 .tabinfo #text3 {
      display: block!important;
  }
  </code></pre>
  <p>As you probably already guessed, the above does not work since the <code>#text</code>s and the <code>#tab</code>s are located in different divs. Is there any workaround or any solution without breaking the Bootstrap layout?</p>