title: Using Sibling Combinator to create tabs for dynamic content
body: <p>I'm basing my tab implementation on the following: </p>
  
  <p><a href="https://codepen.io/oknoblich/pen/tfjFl" rel="nofollow noreferrer">https://codepen.io/oknoblich/pen/tfjFl</a></p>
  
  <p>Within this pen, we have the following structure: </p>
  
  <pre><code>  &lt;input id="tab1" type="radio" name="tabs" checked&gt;
    &lt;label for="tab1"&gt;Codepen&lt;/label&gt;
  
    &lt;input id="tab2" type="radio" name="tabs"&gt;
    &lt;label for="tab2"&gt;Dribbble&lt;/label&gt;
  
    &lt;input id="tab3" type="radio" name="tabs"&gt;
    &lt;label for="tab3"&gt;Dropbox&lt;/label&gt;
  
    &lt;input id="tab4" type="radio" name="tabs"&gt;
    &lt;label for="tab4"&gt;Drupal&lt;/label&gt;
  
    &lt;section id="content1"&gt;
      content1
    &lt;/section&gt;
  
    &lt;section id="content2"&gt;
      content2
    &lt;/section&gt;
  
    &lt;section id="content3"&gt;
     content3
    &lt;/section&gt;
  
    &lt;section id="content4"&gt;
      content4
    &lt;/section&gt;
  </code></pre>
  
  <p>With tabbing made possible by sibling selectors:</p>
  
  <pre><code>section {
    display: none;
    padding: 20px 0 0;
    border-top: 1px solid #ddd;
  }
  
  input {
    display: none;
  }
  
  label {
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #bbb;
    border: 1px solid transparent;
  }
  
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3,
  #tab4:checked ~ #content4 {
    display: block;
  }
  </code></pre>
  
  <p>However I have several "panes" that each require their own tabs, so the <code>name</code> and <code>id</code> attributes are dynamic.</p>
  
  <p>Within a <code>foreach</code> loop that renders the html, I have this:</p>
  
  <pre><code>        &lt;div class="tabs-container"&gt;
  
              &lt;input data-bind="attr:{id: 'tab1-' + factorPaneId, name: 'tabs1-' + factorPaneId}" type="radio" checked&gt;
              &lt;label data-bind="attr:{for: 'tab1-' + factorPaneId"&gt;Description&lt;/label&gt;
  
              &lt;input data-bind="attr:{id: 'tab2-' + factorPaneId, name: 'tabs2-' + factorPaneId}" type="radio" checked&gt;
              &lt;label data-bind="attr:{for: 'tab2-' + factorPaneId"&gt;Description&lt;/label&gt;
  
              &lt;section data-bind="attr:{id: 'content1-' + factorPaneId"&gt;
                  &lt;p data-bind="text: factor.factorDescription"&gt;&lt;/p&gt;
              &lt;/section&gt;
  
              &lt;section data-bind="attr:{id: 'content2-' + factorPaneId"&gt;
                  &lt;p data-bind="text: factor.factorDescription"&gt;&lt;/p&gt;
              &lt;/section&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>But I'm not sure how to modify the CSS to support this need for dynamic <code>id</code>s.  Specifically this bit:</p>
  
  <pre><code>#tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3,
  #tab4:checked ~ #content4 {
    display: block;
  }
  </code></pre>
  
  <p>I need some way to say:</p>
  
  <pre><code>#tab1-*:checked ~ #content1-*{
    display: block;
  }
  </code></pre>
  
  <p>Where the <code>*</code>s are equal.  Is there a CSS/HTML-only solution to this?</p>