Если в контейнере больше одного div-а скрывать все div-ы при помощи css

Question

Есть сайт на WordPress. Использую плагин фильтра с Ajax. Можно ли в моей структуре html скрывать все article, если в main больше одного article? То есть, или показывается один, или не показывается ничего. Хотела сделать при помощи javascript, но article добавляются и удаляются без перезагрузки страницы.

<main id="main" class="site-main">

  <form>
    ...
  </form>

  <article id="post-54" class="post-54 post type-post">
    <div class="entry-content">
      <p>контент</p>
    </div>
  </article>

  <article id="post-53" class="post-53 post type-post">
    <div class="entry-content">
      <p>контент</p>
    </div>
  </article>

  <article id="post-52" class="post-52 post type-post">
    <div class="entry-content">
      <p>контент</p>
    </div>
  </article>

</main>

Answer 1

Используйте CSS-селектор :only-of-type:

main > article:not(:only-of-type) { /* Читается как: Прямой потомок main, который имеет имя тега article и не является единственным потомком такого типа (тега) */
  display: none;
}

<main id="main" class="site-main">

  <form>
    ...
  </form>

  <article id="post-54" class="post-54 post type-post">
    <div class="entry-content">
      <p>контент1</p>
    </div>
  </article>

  <article id="post-53" class="post-53 post type-post">
    <div class="entry-content">
      <p>контент2</p>
    </div>
  </article>

  <article id="post-52" class="post-52 post type-post">
    <div class="entry-content">
      <p>контент3</p>
    </div>
  </article>

</main>

<main id="main" class="site-main">

  <form>
    ...
  </form>

  <article id="post-54" class="post-54 post type-post">
    <div class="entry-content">
      <p>контент4</p>
    </div>
  </article>

</main>

На JS тоже можно (используя MutationObserver), но будет немного сложнее:

/* Функция скрытия/показа */
function fShowHide() {
  let articles = [...main.querySelectorAll('article')];
  articles.forEach(el => {
    el.style.display = (articles.length > 1) ? 'none' : '';
  });
  console.log(`Количество разделов`, articles.length);
}
fShowHide();
/* Колбэк-функция при срабатывании мутации */
function fOnlyOne(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      if ([...mutation.addedNodes, ...mutation.removedNodes].some(el => el.tagName == 'ARTICLE')) {
        fShowHide();
      }
    }
  }
};
// Создаём экземпляр наблюдателя с указанной функцией колбэка
const observer = new MutationObserver(fOnlyOne);
// Начинаем наблюдение за списком дочерних элементов целевого элемента
observer.observe(main, { childList: true });


/* Только для примера */
function add() { main.append(main.querySelector('article').cloneNode(true)); }
function del() { main.querySelector('article').remove(); }

<button onclick="add()">Добавить раздел</button>
<button onclick="del()">Удалить раздел</button>

<main id="main" class="site-main">

  <form>
    ...
  </form>

  <article id="post-54" class="post-54 post type-post">
    <div class="entry-content">
      <p>контент1</p>
    </div>
  </article>

</main>

БЛОГ НА HUSL

Если в контейнере больше одного div-а скрывать все div-ы при помощи css

Ответы (1 шт):