<p dir="auto">Given the example code below:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ul class=&quot;list-group&quot;&gt;
  &lt;li class=&quot;list-group-item active&quot;&gt;
    &lt;span class=&quot;badge&quot;&gt;14&lt;/span&gt;
    &lt;a href=&quot;#&quot;&gt;Cras justo odio&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ul</span> <span class="pl-c1">class</span>="<span class="pl-s">list-group</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">class</span>="<span class="pl-s">list-group-item active</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">badge</span>"<span class="pl-kos">&gt;</span>14<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span>="<span class="pl-s">#</span>"<span class="pl-kos">&gt;</span>Cras justo odio<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">When the class of <code class="notranslate">active</code> is applied to <code class="notranslate">li.list-group-item</code> the <code class="notranslate">color</code> of the anchor tag remains blue instead of being changed to <code class="notranslate">@list-group-active-text-color</code>.</p>
<p dir="auto"><a href="http://bootply.com/78668" rel="nofollow">http://bootply.com/78668</a></p>