Как добавить класс всем блокам, которые выводятся после 3го блока?

Question

[an]

Как добавить класс всем блокам, которые выводятся после 3го блока?
Вот к примеру, после 3го блока всем остальным должен подставляться класс green:

<div class="container">
  <div class="service">1</div>
  <div class="service">2</div>
  <div class="service">3</div>
  <div class="service">4</div>
  <div class="service">5</div>
  <div class="service">6</div>
  <div class="service">7</div>
</div>

.container .service{
  border:1px solid red;
  margin:5px;
  padding:5px;
}
.container .green{border:1px solid green; }

Answer 1

[0xD34F]

Где элементы находятся, какой класс надо добавить и начиная с какого по счёту элемента:

const parent = document.querySelector('.container');
const className = 'green';
const startFrom = 4;

Добавляем:

parent
  .querySelectorAll(`:scope > :nth-child(n + ${startFrom + 1})`)
  .forEach(n => n.classList.add(className));

// или

for (const n of Array.prototype.slice.call(parent.children, startFrom)) {
  n.classList.add(className);
}

// или

for (let el = parent.children[startFrom]; el; el = el.nextElementSibling) {
  el.classList.add(className);
}

// или, также удаляем класс (если вдруг есть) у тех, кому он не должен быть добавлен

for (let i = 0; i < parent.children.length; i++) {
  parent.children[i].classList.toggle(className, i >= startFrom);
}

Comments

[an]

Благодарю Вас!

Answer 2

[Сергей Соколов]

Просто стилями можно:

.container div:nth-child(n + 4){
  border:1px solid green;
  background-color:lightgreen;
}

spoiler