Stylowanie elementów w menu nawigacyjnym

Taki problem. Mam nava, który filtruje dane w tabeli. Kod po stronie HTML wygląda tak:

<ul class="nav nav-tabs">
  <ng-container *ngFor="let cl of classes">
    <li class="nav-item">
      <a  class="nav-link tab-regs"
          [ngClass]="{'active': cl.IdClass == current_class, 'tab-overlap': cl.IdClass > 1}" 
          [ngStyle]="{'z-index': 7 - cl.IdClass}"  
          (click)="filter_class(cl.IdClass)">{{cl.Name}}</a>
    </li>
  </ng-container>
</ul>

CSS:

.tab-regs {
  background-color: #BDBDBE !important;
  box-shadow: 3px 0px 3px rgb(0,0,0, 0.4) !important;
  border-radius: 10px 10px 0px 0px !important;
  color: #FFFFFF !important;
  position: relative;
}

.tab-overlap {
  margin-left: -4px;
}

.tab-regs:hover {
  background-color: #9C9C9D !important;
}

.tab-regs:active {
  background-color: #5A5A5C !important; 
}

Problem polega na tym, że wybrany tab nie bierze stylu .tab-regs:active - a ściślej działa tylko wtedy, kiedy mam wciśnięty przycisk - jak puszczam klawisz, to tab wraca do stanu domyślnego, a ściślej - pojawia się biała obwódka naokoło wybranego tabu. Jak usuwam swój styl .tab-regs i zostawiam tego nava na domyślnych stylach BS, to wszystko działa dobrze. Wydaję mi się, że aplikacja bierze styl .nav-link:active a nie .tab-regs:active jak element ma klasę active

Nie wiem czy dobrze wyjaśniłem, ale sprawa dosyć zawiła ;)

Z góry dziękuję za pomoc

:active zawsze dotyczy stanu "wciśniętego" i zniknie, gdy go puścisz. Pewnie chodziło Ci o .tab-regs.active

Działa, dzięki - te CSSy to wciąż czarna magia dla mnie ;)