title: How to target an element using input type checkbox
body: <p>I have a dropdown type list that will get hidden after specific device width and by default, the dropdown box will be visible so the user is not able to collapse it.</p>
  <p>The default state for input is also hidden.</p>
  <p>Suppose the device width is 804px, and the dropdown gets hidden and input gets visible. By clicking the input the user can see the contents of the dropdown.</p>
  <p>But for some reason, I'm unable to target the dropdown box using the input field.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="checkbox"]:checked~.team-lists {
    display: flex;
    height: 430px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hireDevs"&gt;
    &lt;div class="headers"&gt;
      &lt;h2&gt;Hire Developer Team&lt;/h2&gt;
      &lt;label for="team-lists"&gt;
        &lt;input type="checkbox" class="add-lists" id="team-lists" hidden&gt;
        &lt;i class="ri-add-fill"&gt;&lt;/i&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="team-lists"&gt;
      &lt;a href="#"&gt;Android App Developers&lt;/a&gt;
      &lt;a href="#"&gt;iOS App Developers&lt;/a&gt;
      &lt;a href="#"&gt;Flutter App Developers&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>