How to target and style a single tabTitle?-CodePudding

I'm using Nebular with Angular and I want to style one nb-tab (tabTitle) using a ngClass condition. The following, in the overrides, do change the color but all three tabTitle has this color then:

:host nb-tab .nb-theme-corporate nb-tabset .tab-link .tab-text {
  color:rgb(255, 0, 0);
}

The markup looks as follow:

<nb-tabset>
    <nb-tab 
        tabTitle="Survey Data"
        tabIcon="message-square">
        
    </nb-tab>
    <nb-tab 
        tabTitle="Other Responses"
        badgePosition="top right"
        badgeStatus="success">
        
    </nb-tab>                        
    <nb-tab 
        [ngClass]="{'note-value' : hasNote}"
        tabTitle="Note"
        tabIcon="response">
        
    </nb-tab>
</nb-tabset>

I tried adding a class to the nb-tab element and added the class in front of the css selectors, like so

.note-value .nb-theme-corporate nb-tabset .tab-link .tab-text { 
  color: #fd0909!important;
}

but it didn't target the tabTitle. What is the correct approach here?
The desired code will change only the Note tabTitle color if hasNote is true.

Update: The css selectors are wrong. I copied the wrong code. There should be a :host in the selectors. Here is the correct selectors (which styled all three tabTitles):

.nb-theme-corporate nb-tabset .tab-link .tab-text { 
  color: #fd0909!important;
}

CodePudding user response：

This will work:

:host nb-tab:nth-child(TAB_POSITION) .nb-theme-corporate nb-tabset .tab-link .tab-text {
  color:rgb(255, 0, 0);
}

CodePudding user response：

After many different variations the following selectors finally worked:

.nb-theme-corporate .note-value  nb-tabset .tabset li:last-child .tab-link .tab-text {
  color:rgb(255, 0, 0)!important;
}

I add the .note-value class, with ngClass, on a div around the tabset.