CODEWITHSUNDEEP
css
Scott B
Scott B

Reputation: 40157

How to apply css to only one level of list items (not to child 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.

<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>

The css is below

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

Upvotes: 2

Views: 5708

Answers (1)

Jon
Jon

Reputation: 437386

Add the child selector >:

.hasChild.top > a:after { 
} 
.hasChild.sub > a:after { 
}

Upvotes: 5

Related Questions