: n-я дочерняя (или аналогичная) формула для скрытия div, только если существует менее трех дочерних элементов (должен быть CSS)

#css #css-selectors

#css #css-селекторы

Вопрос:

Я не уверен, что это возможно, хотя я нашел несколько похожих примеров, но они не совсем то, что я ищу (найдено здесь и CSS Tricks).

Я знаю :only-child , что существует, но это должно быть больше похоже на «только два дочерних элемента».

Итак, что у меня есть, это ниже, где я хочу скрыть третий div .controls , когда .child-item существует только 1.

 <div>
  <div class="child-item">
  <div class="child-item">
  <div class="controls"> // Hide only if 1 child item exists
</div>

Я знаю, что это очень просто в Javascript, но это краткосрочное исправление на сайте, который будет проходить капитальный ремонт в следующем году, и у меня нет доступа к кодовой базе, только CMS, где я могу внедрить свой собственный CSS.

Заранее спасибо за любые мысли или предложения.

Ответ №1:

вы можете скрыть .controls элемент, только если предыдущий родственный элемент является одновременно :first-child и имеет .child-item класс

 .child-item:first-child   .controls {
   display: none
}

   .child-item:first-child   .controls {
     display: none
  }

 <div>
  <div class="child-item">child item 1</div>
  <div class="child-item">child item 2</div>
  <div class="controls">controls</div> <!-- visible -->
</div>

<hr />

<div>
  <div class="child-item">child item 1</div>
  <div class="controls">controls</div> <!-- not visible -->
</div>

Развернуть фрагмент