Ломаю голову, не могу сообразить.
Есть список вида ul li ... li ul
Мне нужно для всех
li, у которых стоит класс "
menu-item-has-children" добавить в конце определённый символ, но он также добавляется сразу для всех вложенных элементов.
Вот код:
<ul class="main">
<li id="menu-item-1" class="menu-item menu-item-has-children menu-item-1"><p>Parent</p>
<ul class="sub-menu">
<li id="menu-item-2" class="menu-item menu-item-2"><p>Children 1</p></li>
<li id="menu-item-3" class="menu-item menu-item-3"><p>Children 2</p></li>
<li id="menu-item-4" class="menu-item menu-item-4"><p>Children 3</p></li>
<li id="menu-item-5" class="menu-item menu-item-has-children menu-item-5"><p>Children 4 + Sub menu</p>
<ul class="sub-menu">
<li id="menu-item-6" class="menu-item menu-item-6"><p>Sub menu children 1</p></li>
<li id="menu-item-7" class="menu-item menu-item-has-children menu-item-7"><p>Sub menu children 2 + sub menu</p>
<ul class="sub-menu">
<li id="menu-item-8" class="menu-item menu-item-8"><p>Sub menu children 1</p></li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-9" class="menu-item menu-item-9"><p>Children 5</p></li>
<li id="menu-item-10" class="menu-item menu-item-10"><p>Children 6</p></li>
</ul>
</li>
</ul>
.menu-item-has-children p:after
{
content: ' [>]';
}
.sub-menu .menu-item-has-children p:after
{
content: ' [»]';
}
Песочница «
здесь»
Другими словами мне нужно сделать так, что если какой-нибудь элемент имеет вложенные (дочерние) элементы, то обозначить его символом
» в конце.