Как установить border-right: ни один в метке для последнего ребенка?

Question

У меня есть label, которые возвращают разные имена (многие) в одном из моих div'ов, вот как это выглядит в html-представлении.

<div class="customerDisplayFlex">
      <div class="" *ngFor="let cust of customers">
     <label class="dataLabel">
          <input type="radio"
                  name="user-radio"
                  [value]="customer"
                  [ngModel]="currentCustomerContext"
                  (click)="onCustomerContextchange(customer)"
                  class="dataLabel__input" />

          <span class="customer__label">{{customer.firstName | titleCase}} {{ customer.lastName | titleCase}}</span>
        </label>
</div>
</div>

вот css вида

.dataLabel{
color: green;
border-right: 2px solid grey;
}
.dataLabel:last-child{
border-right: none;
}

Я даже пытался использовать sass:

.dataLabel{
    color: green;
    border-right: 2px solid grey;
&:last-child{
border-right: none;
}
}

странным образом, это не работает, что я здесь не так делаю?Может кто-нибудь, пожалуйста, помогите?спасибо

Answer 1

Действительно ли это последний ребенок в своем контейнере?(не только последний ярлык?).(Обычно следуют теги input или аналогичные)

Если это последний тег label, вы можете использовать :last-of-type вместо :last-child

---

ADDITION послекомментарии и после того, как к вопросу добавлено больше кода:

Если все .customerDisplayFlex находятся в еще одном контейнере, который впоследствии не содержит ничего, это должно работать:

.customerDisplayFlex:last-child label { border-right: none; }

Answer 2

Вы не хотите :last-child, вы хотите :last-of-type:

.dataLabel {
  color: green;
  border-right: 2px solid grey;
}

.dataLabel:last-of-type {
  border-right: none;
}

<div class="customerDisplayFlex">
  <div class="" *ngFor="let cust of customers">
    <label class="dataLabel">Label 1</label>
    <label class="dataLabel">Label 2</label>
    <label class="dataLabel">Label 3</label>
  </div>
</div>

101 ⋅ ⋅

Затем вы можете даже улучшить код с помощью селектора :not, например:

.dataLabel {
  color: green;
}

.dataLabel:not(:last-of-type) {
  border-right: 2px solid grey;
}

<div class="customerDisplayFlex">
  <div class="" *ngFor="let cust of customers">
    <label class="dataLabel">Label 1</label>
    <label class="dataLabel">Label 2</label>
    <label class="dataLabel">Label 3</label>
  </div>
</div>

Надеюсь, это поможет.

Answer 3

попробуйте

.dataLabel span:last-child{
border-right: none;
}