Ограничить количество определенного класса div на одной странице (WordPress)

Question

Есть ли решение ограничить количество div с определенным классом на странице?

У меня есть расширение, которое добавляет <div class="vc-box"> с содержимым в нем.

Допустим, у меня есть восемь экземпляров <div class="vac-box"> на одной странице.

Теперь я хотел бы иметь только три экземпляра этого видимого. Остальное должно быть скрыто.

Answer 1

Если все они имеют один и тот же родительский элемент и если в этом родительском элементе нет других дочерних элементов, вы можете использовать селектор :nth-child(n) в сочетании с display: none. Чтобы повлиять на всех детей, начиная с четвертого, вы должны использовать :nth-child(1n+4), как показано ниже.

.vac-box:nth-child(1n+4) {
  display: none;
}

<div class="container">
  <div class="vac-box">1</div>
  <div class="vac-box">2</div>
  <div class="vac-box">3</div>
  <div class="vac-box">4</div>
  <div class="vac-box">5</div>
  <div class="vac-box">6</div>
  <div class="vac-box">7</div>
  <div class="vac-box">8</div>
</div>

Однако, если эти DIV находятся в разных родительских элементах или если между ними есть другие дочерние элементы, это невозможно сделать только с помощью CSS - для этого вам нужен Javasript.

Answer 2

Вы можете попробовать использовать селектор nth-child, чтобы скрыть определенные div: https://www.w3schools.com/cssref/sel_nth-child.asp