title: Change background color when button is active or selected
body: <p>I have default  <code>._sideFolder</code>  with <code>background</code> color of <code>black</code></p>
  
  <p>I want to change the <code>bgcolor</code> into <code>blue</code> when the <code>button</code> is <code>selected</code></p>
  
  <pre><code>.zf-folder:active ._sideFolder {
    background-color: blue;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0px;
    width: 5px
  }
  </code></pre>
  
  <p>The blue color only appears when clicked.</p>
  
  <p>I am really confused with my pseudo CSS. Should I use JavaScript in here?</p>
  
  <p><strong><a href="https://jsfiddle.net/4fukuma/qb8b4hcj/9/" rel="nofollow noreferrer">My JSFiddle</a></strong></p>
  
  <p>I want to display like in the picture on the left.</p>
  
  <p><strong>FYI: In my project I use <code>._sideFolder</code> with <code>background-color: red;</code></strong></p>
  
  <p><a href="https://i.stack.imgur.com/rqRSD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rqRSD.png" alt="enter image description here"></a></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-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('table.table').DataTable();
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>._sideFolder {
    background-color: black;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0px;
    width: 5px
  }
  
  .zf-folder:active ._sideFolder {
    background-color: blue;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0px;
    width: 5px
  }
  
  .zf-folder a {
    color: white;
    text-decoration: none;
  }
  
  ._tabFolder {
    background: red;
    cursor: pointer;
    position: relative;
  }
  
  ._tabFolder:hover {
    background-color: grey
  }
  
  ._tabFolder:active {
    background-color: rgba(29, 33, 41, 1)
  }
  
  ._itemPosition {
    align-items: center;
    display: flex
  }
  
  
  
  ._iconText:hover ._1i5y,
  .uiPopover.selected ._1i5y {
    display: block
  }
  
  ._iconText {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 13px;
  }
  
  ._iconFolder,
  ._1i5x,
  ._1i5w {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle
  }
  
  
  
  ._5bme ._iconFolder {
    background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: -412px -21px
  }
  
  .hyperspan {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;ul class="nav"&gt;
  
    &lt;div class="zf-folder"&gt;
      &lt;li class="active"&gt;
        &lt;div id="tabFolder" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;"&gt;
          &lt;div class="_sideFolder"&gt;&lt;/div&gt;
          &lt;div class="_iconText" style="width: 215px"&gt;
            &lt;div class="ellipsis"&gt;
              &lt;div class="_iconFolder"&gt;
                &lt;div class="_icon-col"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;a href="#mainFolder" aria-controls="mainFolder" data-toggle="tab"&gt;Main Folder&lt;span class="hyperspan"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/div&gt;
  
    &lt;div class="zf-folder"&gt;
      &lt;li&gt;
        &lt;div id="tabFolder2" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;"&gt;
          &lt;div class="_sideFolder"&gt;&lt;/div&gt;
          &lt;div class="_iconText" style="width: 215px"&gt;
            &lt;div class="ellipsis"&gt;
              &lt;div class="_iconFolder"&gt;
                &lt;div class="_icon-col"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;a href="#secondFolder" aria-controls="secondFolder" data-toggle="tab"&gt;Second Folder&lt;span class="hyperspan"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/div&gt;
  
  &lt;/ul&gt;
  
  
  &lt;!-- CONTENT --&gt;
  
  
  &lt;div class="tab-content"&gt;
  
    &lt;div class="tab-pane fade in active" id="mainFolder"&gt;
      &lt;div class="zf-table"&gt;
        &lt;table class="table table-bordered table-hover table-striped"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Start Date&lt;/th&gt;
              &lt;th&gt;End Date&lt;/th&gt;
              &lt;th&gt;Operation&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;
                
                &lt;button class="btn btn-success btn-xs approve-off" type="submit" value="approve"&gt;
                  &lt;span class="fa fa-check-square-o"&gt;&lt;/span&gt; Approve
                &lt;/button&gt;
                &lt;button class="btn btn-danger btn-xs reject-off" type="submit" value="reject"&gt;
                  &lt;span class="fa fa-times"&gt;&lt;/span&gt; Reject
                &lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="tab-pane fade in" id="secondFolder"&gt;
      &lt;div class="zf-table"&gt;
        &lt;table class="table table-bordered table-hover table-striped"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Start Date&lt;/th&gt;
              &lt;th&gt;End Date&lt;/th&gt;
              &lt;th&gt;Operation&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;
                &lt;input hidden="hidden" name="offId" /&gt;
                &lt;button class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete"&gt;
                  &lt;span class="fa fa-times"&gt;&lt;/span&gt; Delete
                &lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>