routerLinkActive class dosen't apply if there is already a class present to that component

Question

I came across a wired problem where I have an angular material sidebar and in that I have buttons used for routing the applications let me put the code below

<div fxLayoutAlign="start stretch">
      <button routerLinkActive="selected"  [routerLinkActiveOptions]="{exact:true}" (click)="btnclick('faculty')" mat-flat-button routerLink="/mainview/faculty">
        {{'sidebar.faculty' | translate}}
      </button>
    </div>

so I use button with the applied default style as below in css file

.example-container button{
    color: #DCDCDC;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-style: normal;
    font-weight: lighter;
  }

and below is the style I want to apply when the routerLink is Active

.selected{
    color: white;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-weight: 500;
  }

but the selected style is not getting applied I tried various hacks to apply it but couldn't work like using routerLinkActive #rla="routerLinkActive" and applying that condition in ngclass etc etc

But I came to see the special behaviour that It works if I remove the default style...!!!

I don't know the the reason why but It works if I remove the default button style.

So can anyone help me to figure out what exactly is needed for this solution as I searched for the similar post but none worked for me..!!

Answer 1

This seems to be a CSS specificity problem.

You might want to have a look at these 2 articles which explain this topic very well:

• Specifics on CSS Specificity
• CSS Specificity: Things You Should Know

In this case, .example-container button is more explicit than .selector because the first selector has a class and an element(0011), whereas the second one has only a class(0010).

A solution would be to make the second selector more specific:

.example-container button.selected { ... }

which has 2 classes and one element.