Как одному из нескольких одинаковых дивов добавить id или дополнительный class?

Question

[lin24]

Добрый день необходимо последнему, диву в обертке добавить доп class или id
Ранее я пользовался подобной конструкцией, но таким методом я всем элементам добавлю(заменяю) желаемое, а нужно только одному:

const links = document.querySelectorAll('.class');
links.forEach(el => {
    el.setAttribute('class', 'xxx');
})

Непосредственно код для блока ниже, задать в верстке не могу, данная форма собирается сама:

<div class="col-sm-12 bx-soa-customer">
      <div class="form-group bx-soa-customer-field"data-property-id-row="20"></div>
      <div class="form-group bx-soa-customer-field"data-property-id-row="21"></div>
      <div class="form-group bx-soa-customer-field"data-property-id-row="22"></div>
      <div class="form-group bx-soa-customer-field"data-property-id-row="43"></div>
    </div>

Answer 1

[Александр]

document.querySelector('.bx-soa-customer > .bx-soa-customer-field:last-child')?.classList.add('xyz');

Comments

[Сергей delphinpro]

А если класс задаётся с целью стилизации, то и задавать его не нужно

.bx-soa-customer > .bx-soa-customer-field:last-child {
  // some styles
}

[Александр]

Сергей delphinpro, Вообще так. Код больше для примера, как получить последний элемент.

[Сергей delphinpro]

Александр, да это я для автора дополнил