SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to apply css only to parent elements

    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.

    HTML Code:
    	<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>

    Code:
    .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;
    }

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,283
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    change it to .hasChild.sub > a:after - that applies the style only to the direct decendant, not to all descendents (i.e. no cascade).
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, terrific. Thanks Dave!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •