title: Set div with an ID grit template after clicking checkbox
body: <p>I have a question. I have a simple chekcbox that in html looks like</p>
  <pre><code>&lt;label class=&quot;container__control--checkbox&quot;&gt;
      &lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; id=&quot;presentation_full_screen&quot; class=&quot;container__control&quot; onchange=&quot;_handleMainLayout()&quot; /&gt;
      &lt;span&gt;CLICK&lt;/span&gt;
   &lt;/label&gt;
  </code></pre>
  <p>So when I click checkbox I fire up this type script:</p>
  <pre><code>   _handleMainLayout() {
          const layoutContainer = &lt;HTMLInputElement&gt;document.getElementById(&quot;main_layout&quot;);
          const hideCommunicationCheckbox &lt;HTMLInputElement&gt;document.getElementById(&quot;presentation_full_screen&quot;);
          if (hideCommunicationCheckbox.checked) {
              layoutContainer.removeAttribute(&quot;style&quot;);
          } else {
              layoutContainer.style.gridTemplateColumns = &quot;1fr&quot;;
          }
      }
  </code></pre>
  <p>So what id does it sets template on main layout (id: main_layout) from 1 column to 2 columns depends on this if checkbox is selected, and well it works.</p>
  <p>But I was wondering, there are those selectors in css :checked and not(). So thing is, element with id main layout is way up DOM tree, and question can I somehow get that element using those selectors or any any other css/scss trick and toggle this grid-template-colum?</p>
  <p>something like</p>
  <pre><code>.container__control :checked {
     //get div with ID and set its grid-template-colum
   }
  .container__control :not(:checked) {
     //get div with ID and set its grid-template-colum
  }
  </code></pre>
  <p>Or am I left with only JS solution?</p>