LI last-child example

Showing how to only apply a style to the last child LI in nested ULs.

HTML

<h2>Example 1</h2>

<div class="navpole">
    <ul>
        <li class="active"><a href="#">Lorem ipsum</a>

        </li>
        <li><a href="#">Lorem ipsum</a>

            <ul>
                <li class="active"><a href="#">Lorem ipsum</a>

                </li>
                <li><a href="#">Lorem ipsum</a>

                </li>
                <li><a href="#">Lorem ipsum</a>

                    <ul>
                        <li class="active"><a href="#">Lorem ipsum</a>

                        </li>
                        <li><a href="#">Lorem ipsum</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">Lorem ipsum</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Lorem ipsum</a>

        </li>
        <li><a href="#">Lorem ipsum</a>

        </li>
    </ul>
</div>

<h2>Example 2</h2>

<div class="navpole">
    <ul>
        <li class="active"><a href="#">Lorem ipsum</a>

        </li>
        <li><a href="#">Lorem ipsum</a>

        </li>
        <li><a href="#">Lorem ipsum</a>

        </li>
    </ul>
</div>

CSS

html {
    font-family: sans-serif;
}
a {
    text-decoration: none;
    color: #6A5288;
}
.navpole ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.navpole li {
    border-top: 1px solid #BBB;
}
.navpole li > a {
    padding: 10px 15px;
    display: block;
}
.navpole li a:hover {
    background-color: #6A5288;
    color: #FFF;
    text-decoration: inherit;
}
.navpole li.active > a {
    background-color: #3F2F55;
    color: #FFF;
}
.navpole ul > li > ul {
    background-color: #FFF;
}
.navpole ul > li > ul > li > a {
    padding-left: 30px;
}
.navpole ul > li > ul > li > ul > li > a {
    padding-left: 45px;
}

JavaScript

$('.navpole .active').each(function () {
    if ($(this).siblings().children('ul').length > 0) {
        $(this).removeClass('active');
    }
});