Question

My question says everything. I am new in CSS. I am trying to use following code but it is not working:

ul.verticalNav {
    /*declaration*/
}

ul.verticalNav li {
    /*declaration*/
}

ul.verticalNav li a {
    /*declaration*/
}

ul.verticalNav li a:not(:nth-last-child(1)) {
    border-bottom: 1px solid #323232;
}

The class ul.verticalNav li a:not(:nth-last-child(1)) is not creating borders. The HTML is:

<ul class="verticalNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">View Profile</a></li>
    <li><a href="#">Edit Profile</a></li>
    <li class="bottomLeftMenuItem"><a class="bottomLeftMenuItem" href="#">Search Profile</a></li>
</ul>

I am unable to find the problem.

Thanks in advance.

---

I am using Firefox 12.0 and Google Chrome 18.0.1025.168 m.

Answer 1

Your selector is wrong, it should be

ul.verticalNav li:not(:nth-last-child(1)) a {
    border-bottom: 1px solid #323232;
}​

That’s because with your markup, <a> is always going to be the last child of its <li> parent. What you want is to apply the style to <a>s inside any <li> which is not a last child.