Add dropdown arrow indicators to menu items that have submenus only?
No. CSS has no contains child
selector. You'd probably be better to just add a class to the li
element. For example:
<li class="has-child">
<a href="#">The Link</a>
<ul class="child">
<li>Child 1</li>
</ul>
</li>
Your CSS selector would in turn look like:
.mainNav li.has-child > a:after {
color: #444;
content: ' ▾';
}
You could have jQuery add the class for you, if that's an option:
$('.mainNav li:has(ul)').addClass('has-child');
jsFiddle Demo
CSS has no contains child
selector.
However it has various sibling
selectors, only-child
and not(:only-child)
Since you add indicator to the anchor, use following CSS
.mainNav li>a:not(:only-child):after {
color: #444;
content: ' ▾';
}
<div class="mainNav">
<li>
<a href="#">The item with child</a>
<ul class="child">
<li>Child 1</li>
</ul>
</li>
<li>
<a href="#">No child item</a>
</li>
</div>