#html #css #angular #mat-tab
#HTML #css #угловой #вкладка mat-tab
Вопрос:
Я столкнулся с этим примером, когда пытался решить проблему с перемещением последней вкладки вправо от группы — это то, что мне нужно.
Вот пример: StackBlitz
Я попытался добавить класс и попробовать следующее… но я не могу изменить стиль только для одной группы.
.my-class .mat-tab-label:last-child {
margin-left: auto;
}
Как я могу сделать css-эффект только для одной из моих групп?
Ответ №1:
Вы могли бы выбрать правильную группу / строку, добавив класс .mat-tab-group в свой селектор и объединить его с :nth-child , :first-child и т. Д. Это зависит от того, какую группу / строку вы хотите выбрать. Вот два примера:
Это изменит стиль только первой группы:
.mat-tab-group:first-child .mat-tab-label:last-child {
margin-left: auto;
}
Приведенный ниже пример будет нацелен только на последнюю метку во второй группе / строке. Чтобы настроить таргетинг на определенную группу / строку, вы можете изменить n-й дочерний номер на все, что захотите:
.mat-tab-group:nth-child(2) .mat-tab-label:last-child {
margin-left: auto;
}
Комментарии:
1. Спасибо, я остановился на втором варианте — работает отлично!