<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; }
const parent = document.querySelector('.container');
const className = 'green';
const startFrom = 4;
parent
.querySelectorAll(`: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);
}