Добавление класса none в нахождении больше 3-х div с одинаковым классом list?

Question

[bovzlou]

Есть список на странице

<div class="list">1</div>.
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
<div class="list">6</div>

Я понимаю, что тут рекурсия, но я в этом чайник, т.к. элементов div.list каждый раз может быть разное количество.
Потому больше 3-х я хочу скрыть

<div class="list">1</div>.
<div class="list">2</div>
<div class="list">3</div>
<div class="list none">4</div>
<div class="list none">5</div>
<div class="list none">6</div>

let elem = document.querySelector(".list");
нужно создать функцию 
или сразу делать перебор for (let el of elem);
и я так понимаю, что добавить класс 
elem.classList = "none";

как цикл работает в этом случае?
Когда их больше 3-х

Кто-то может помочь? Хочу понять. Я только начал изучать.
P.S. Это по типу spoiler
<button onclick="spoiler()">Спойлер</button>
его бы всунуть

Comments

[Вадим]

Скрыть можно чистым css.

.list:nth-child(n+4), .list:nth-child(2n+4) {
  display: none;
}

Или так:

.list {
  display: none;
}
.list:first-child, .list:nth-child(2), .list:nth-child(3) {
  display: block;
}

[bovzlou]

Вадим, Вадим, спасибо, но это я знаю, я js хочу применить

Answer 1

[mletov]

document.querySelectorAll('div.list:nth-child(n+4)').forEach(function(el) {
   el.style.display = 'none';
});

Почитайте про nth-child(n)

https://stackoverflow.com/questions/22035799/css-n...

Comments

[bovzlou]

почему-то не работает

[mletov]

bovzlou, проапдейтил ответ