Как получить следующий элемент после выбранного?

Question

Есть список:

Как получить доступ к :after сразу после ul, если список имеет класс .tree-visible?

Пробовал так - но не сработало:

.tree-visible:after {
  content: "-";
}

 .tree-visible ~ :after {
   content: "-";
 }

Полный код:

Answer 1

::after в этом примере принадлежит родительскому li, а селекторами нельзя добираться до родительских элементов.

Есть селектор :has(), который не поддерживается ни в одном браузере... (¬_¬")

li:has(>ul.tree-visible)::after {
  content: "Mooo...";
}

Берет все li, непосредственно внутри которых есть ul.tree-visible.

К псевдоэлементу косвенно можно добраться через JS (если по каким-то причинам нельзя заранее отметить нужные li отдельным классом):

(function() {
  var ul = document.querySelectorAll(".tree-visible");
  
  for (var i = 0; i < ul.length; i++) {
    ul[i].parentNode.classList.add("tree-visible-parent");
  }
})();

.tree-visible-parent::after { /* <-- */
  content: "Bubu!";
  color: red;
}

<li>
  <ul class="tree-visible">Test</ul>
</li>

<li>
  <ul class="not">Test</ul>
</li>

БЛОГ НА HUSL

Как получить следующий элемент после выбранного?

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