Mat tab last child - only affect one group and not all other groups in component?

Question

I ran into this example when looking to solve an issue with making the last tab move to the right of the group - which is what I need.

Here's an example: StackBlitz

I've tried adding a class and trying the following... but I can't get the style to change for only one group.

.my-class .mat-tab-label:last-child {
  margin-left: auto;
}

How can I only make the css effect a specific of my groups?

Answer 1

You could do the selecting of the correct group/row with adding the .mat-tab-group class to your selector and combine it with a :nth-child, :first-child, etc. It depends on which group/row you want to select. Here are two examples:

This will only adjust the styling of the first group:

.mat-tab-group:first-child .mat-tab-label:last-child {
  margin-left: auto;
}

The example below will target only the last label within the second group/row. To target a specific group/row you could change the nth-child number to anything you want:

.mat-tab-group:nth-child(2) .mat-tab-label:last-child {
  margin-left: auto;
}