Apply styling to an element only if it has child nodes?

HTML & CSS
1

I’m working with a menu system (WordPress) that outputs markup on custom menus like so:

<ul class="menu">
	<li class="current-menu-item current_page_item"><a href="site.com">About Us</a>
		<ul class="sub-menu">
			<li class=""><a href="site.com/our-charity-partners/">Our Charity Partners</a></li>
			<li class=""><a href="site.com/privacy-policy/">Privacy Policy</a></li>
		</ul>
	</li>
	<li class=""><a href="site.com/apparel/">Buy Apparel</a>
		<ul class="sub-menu">
			<li class=""><a href="site.com/benevolent-elephan/">Benevolent Elephant</a>
				<ul class="sub-menu">
					<li class=""><a href="site.com/benevolent-elephant-short-sleeve/">Benevolent Elephant Short Sleeve</a></li>
					<li class=""><a href="site.com/benevolent-elephant-long-sleeve/">Benevolent Elephant Long Sleeve</a></li>
				</ul>
			</li>
			<li class=""><a href="site.com/eagle-spirit/">Eagle-Spirit</a>
				<ul class="sub-menu">
					<li class=""><a href="site.com/eagle-spirit-short-sleve/">Eagle-Spirit Short Sleeve</a></li>
					<li class=""><a href="site.com/awards-honors/">Eagle-Spirit Long Sleeve T-Shirts</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Is there a way in CSS, without altering the markup, to add a generated content marker after each menu item that has child nodes (↓ for top level items and → for submenu items)?

If not, please feel free to move this to the javascript section.

2

You couldn’t add markup with CSS but you can add background images.

3

That would be very easy. These are dynamically generated menus, so I need a dynamic solution. If Its not possible with css, I’m sure I can do it with javascript.

4

Yes totally, but then it is better to use only CSS while you can, and I think that what you want to achieve could be perfectly accomplished with CSS bg images/sprites. When you say that the menus are dynamically generated I do not know if the name of the classes or the markup changes but I’m pretty sure you can find a fix purely with CSS.

5

I’m open to a pure CSS solution, and if there is one to be had, history has shown me this is the place to find it, but until then, here’s my jQuery/CSS solution;

<script type="text/javascript">
  jQuery("#menu-site-menu > li").has("ul").addClass("hasChild top").find("li").has("ul").addClass("hasChild sub");
</script>


li.hasChild.top:after,li.hasChild.sub:after {
	content:' ';
	height:0;
	position:absolute;
	bottom:-3px;
	right:-5px;
	width:0;
	border:5px solid transparent;
	border-top-color:#fff;
	}

li.hasChild.sub:after {
	top:9px;
	border-top-color:transparent;
	border-left-color: #ccc;
	}
6

Hi Scott,

We had a recent css quiz where arrows were added automatically to drop downs which seems to do what you want.