Font weight when active - CSS
<p>Currently I am trying to make the selected list item STAY bold after selected and go back to normal after a different item is selected. basically I want a "currently selected tab". is there a way I can do this with css or do I need Javascript? Here is my code -></p>

<p>CSS: (using SASS)</p>

<pre><code>   .setup-nav {
  float: left;
  position: relative;
  width: 20%;
  padding-right: 20px;
  box-sizing: border-box;

  font-size: 18px;
  color: $base-link-color;
  text-align: left;

  li {
    border-top: none;
    border-bottom: none;

    &amp;.active {
      font-weight: bold;
    }
  }
</code></pre>

<p>HTML: </p>

<pre><code>&lt;ul class="setup-nav"&gt;
  &lt;li&gt;&lt;a href="#install-http"&gt;HTTP&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#install-email"&gt;Email&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#install-ruby"&gt;Ruby&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#install-python"&gt;Python&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Hopefully there is an easy way to do this.</p>