title: To change parent's style with pure js
body: <p>I have a switch button. The code is below:</p>
  
  <pre><code>&lt;div class="switch-radiobutton" data-style="rounded" data-label="on-off"&gt;
     &lt;input type="radio" id="rb-1" name="rb" checked&gt;
     &lt;label class="label" for="rb-1"&gt;&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="switch-radiobutton" data-style="rounded" data-label="on-off"&gt;
      &lt;input type="radio" id="rb-2" name="rb"&gt;
      &lt;label class="label" for="rb-2"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>/* BASIC SWITCH STYLE  */
  
  .switch-radiobutton [type='radio'] {
      visibility: hidden;
  }
  
  .switch-radiobutton {
      display: inline-block;
      position: relative;
      height: 50px;
      line-height: 50px;
      width: 100px;
      margin-bottom: 30px;
  
      background: red;
      z-index: 1;
  }
  
  /* LABEL STYLE  */
  
  .switch-radiobutton:before,
  .switch-radiobutton:after {
      display: block;
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      text-align: center;
      text-transform: uppercase;
      font-size: 20px;
      z-index: 2;
      color: #fff;
  }
  
  .switch-radiobutton:before {
      left: 0;
  }
  
  .switch-radiobutton:after {
      right: 0;
  }
  
  .switch-radiobutton {
  
      &amp;:before {
          content: 'on';
      }
  
      &amp;:after {
          content: 'off';
      } 
  }
  
  /* SWITCH OFF */
  
  .switch-checkbox label,
  .switch-radiobutton label {
      position: absolute;
      display: block;
      top: 4px;
      left: 4px;
      height: 42px;
      width: 42px;
  
      background: #fff;
      cursor: pointer;
      transition: all .4s ease-in-out;
      z-index: 3;
  }
  
  /* SWITCH ON */
  
  .switch-checkbox [type='checkbox']:checked + label,
  .switch-radiobutton [type='radio']:checked + label {
      transform: translate3d(50px,0,0);
  }
  
  /* SWITCH ROUNDED */
  
  .switch-radiobutton[data-style='rounded'],
  .switch-radiobutton[data-style='rounded'] label {
      border-radius: 50px;
  }
  
  /* SWITCH SQUARE */
  
  .switch-checkbox[data-style='square'],
  .switch-checkbox[data-style='square'] label {
       border-radius: 5px;
  }
  </code></pre>
  
  <p>How can I change the background of the parent element(.switch-radiobutton) on the input checked with css or pure js? Without jQuery. As I know I can't change parent element with CSS.</p>