Применить стиль к элементу с пустым соседом, используя Sass - PullRequest
Новая
       52

Применить стиль к элементу с пустым соседом, используя Sass

0 голосов
/ 31 мая 2019

Можно ли стилизовать элемент в зависимости от того, является ли его следующий брат пустым. 

    <ul class="menu">
        <li class="label">Hide me when submenu is empty</li>
        <ul class="submenu"></ul>
    </ul>

Давайте предположим, что я хочу скрыть <LI class="label">, когда <UL class="submenu"> пусто. Это возможно с CSS / Sass?

Я пробовал несколько вариантов приведенного ниже примера, но мне не повезло. 

    ul {
        > li {
            ~ ul:empty {
                display: none;
            }
        }
    }

Я бы предпочел придерживаться решения CSS, если это возможно.

1 Ответ

0 голосов
/ 31 мая 2019

Первая, главная проблема, с которой связана ваша разметка, заключается в том, что она недействительна.

Единственными допустимыми дочерними элементами <ul> элементов являются <li> s.Поэтому, чтобы быть действительным, ваш внутренний <ul> должен быть внутри <li>.Он не может быть непосредственным потомком другого <ul>.

Но даже при условии допустимой разметки: 

<ul class="menu">
  <li class="label">Hide me when submenu is empty
    <ul class="submenu"></ul>
  </li>
</ul>

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

Если вы не можете сделать это только с помощью CSS, вы не можете сделать это только с SCSS, потому что SCSS - это CSSсинтаксический сахар.

Вот как будет выглядеть решение JavaScript: 

const uls = document.querySelectorAll('ul');
[...uls].forEach((ul) => {
  const emptyChildUls = ul.querySelectorAll('ul:empty');
  [...emptyChildUls].forEach((emptyUl) => {
    emptyUl.parentElement.classList.add('hasEmptyList');
  })
});
ul li.hasEmptyList {
  display: none;
}
<ul>
  <li>Hide me when submenu is empty
    <ul></ul>
  </li>
</ul>

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

Приведенный выше скрипт должен запускаться после , когда вы закончили добавлять<ul> с на вашу страницу.Если вы добавите их после запуска скрипта, к ним не будет применен класс (вам нужно снова запустить скрипт, чтобы они это сделали).

...