title: How can I change color of selected option in Sidebar using CSS?
body: <p>I'm having trouble figuring out how to change the color of the selected option in a sidebar. For example, I have 4 options, and I click the first option, I want the first option in the sidebar to have a white background color all the time. All I have now is just a hover option, where it changes the background color. Can I have this with only using CSS HTML? From my research, I saw a few in JavaScripts and PHP, but wonder if I can do this using only CSS HTML. Below is my current code:</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>.flexContainer {
      display: flex;
  }
  
  .flexContainer &gt; div {
      margin: 10px;
      padding: 20px;
      font-size: 20px;
      text-align: center;
  }
  
  .sidebarContainer {
      flex-shrink: 1;
  }
  
  .sidebar {
      width: 200px;
      background-color: #dd1d5e;
      overflow: auto;
      border-radius: 30px;
  }
  
  .sidebar a {
      display: block;
      color: white;
      padding: 16px;
      text-decoration: none;
  }
  
  .sidebar a:hover:not(.active) {
      background-color: #ffffff;
      color: #dd1d5e;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexContainer"&gt;
              &lt;div class="sidebarContainer"&gt;
                  &lt;div class="sidebar"&gt;
                      &lt;a href="category.php"&gt;Holiday&lt;/a&gt;
                      &lt;a href="category.php"&gt;Vegetarian&lt;/a&gt;
                      &lt;a href="category.php"&gt;Dessert&lt;/a&gt;
                      &lt;a href="category.php"&gt;Cultural Cuisine&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>