How to apply css only to parent elements

[Scott Blanchard]

In the code below, I'm adding a down array (via generated content) to the top level elements that have child menus. And I'm adding a right arrow to the submenu elements that have child menus.

However, I need some help with my css, because it applies the arrows to all child elements if the parent has children. I only need it to be applied to those elements that have children.

	<ul id="menu-site-menu">
		<li class="hasChild top"><a href="#">About Us</a>
			<ul class="sub-menu">
				<li><a href="#">Our Charity Partners</a></li>
				<li><a href="#">Privacy Policy</a></li>
			</ul>
		</li>
		<li class="hasChild top"><a href="#">Buy Apparel</a>
			<ul class="sub-menu">
				<li class="hasChild sub><a href="#">Benevolent Elephant</a>
					<ul class="sub-menu">
						<li><a href="#">Benevolent Elephant Short Sleeve</a></li>
						<li><a href="#">Benevolent Elephant Long Sleeve</a></li>
					</ul>
				</li>
				<li class="hasChild sub"><a href="#">Eagle-Spirit</a>
					<ul class="sub-menu">
						<li><a href="#">Eagle-Spirit Short Sleeve</a></li>
						<li><a href="#">Eagle-Spirit Long Sleeve T-Shirts</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Customer Service</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>

.hasChild.top a:after {
	content: ' ';
	height: 0;
	position: absolute;
bottom:-5px;
right:-5px;
	width:0;

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

	border: 5px solid transparent;
	border-left-color: #ccc;
}

[DaveMaxwell]

change it to .hasChild.sub > a:after - that applies the style only to the direct decendant, not to all descendents (i.e. no cascade).

[Scott Blanchard]

Ah, terrific. Thanks Dave!