title: Change to a Different Colour For Each Bootstrap Active Tab (CSS)
body: <p>I can successfully change the colour of the active tab and non active tabs as a group, but is it possible to do so for each individual tab?</p>
  
  <p>I'm trying to accomplish a different background colour and white text for active tabs and non active tabs to have a white background but different text colour.</p>
  
  <p>Here is the current working code:</p>
  
  <pre><code> .nav-tabs &gt; li &gt; a {
      background-color: #7f7fff !important;
  }
  
   .nav-tabs &gt; li &gt; a:hover{
    background-color: #cc0033 !important;
      color:#fff !important;
  }
  
  .nav-tabs &gt; li.active &gt; a, .nav-tabs &gt; li.active &gt; a:hover, .nav-tabs &gt; li.active &gt; a:focus {
    background-color: #cc0033 !important;
      color:#fff !important;
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>                      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#start"&gt;start &lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;menu1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a data-toggle="tab" href="#menu2"&gt;menu2&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>
  I have now added a class to the 'a' tag as suggested by Charlie below and still cannot get the colour to change to specific tabs</p>
  
  <pre><code>.menu1TabCs &gt; li.active &gt; a, .menu1TabCs .nav-tabs &gt; li.active &gt; a:hover, .menu1TabCs .nav-tabs &gt; li.active &gt; a:focus {
    background-color: orange !important;
      color:#fff !important;
  }
  </code></pre>