using nth-last-child css in ul

Question

Can you help me with styling of last link in this ul.

#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a {
    vertical-align: middle !important;
    padding: 0 35px;
    border-right: 1px #dadada solid;
}
<div id="DeltaTopNavigation" class="ms-core-navigation" role="navigation">
     <div class=" noindex ms-core-listMenu-horizontalBox">
          <ul class="root ms-core-listMenu-root static">
               <li class="static">
                    <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/" accesskey="1"></a>
                    <ul class="static">
                         <li class="static selected">
                              <a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="/AboutPGTU"></a>
                         </li>
                         <li class="static">
                              <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Docs"></a>
                         </li>
                         <li class="static">
                              <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Services"></a>
                         </li>
                         <li class="static">
                              <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Ratings"></a>
                         </li>
                    </ul>
               </li>
        </ul>
</div>

I try to use

#DeltaTopNavigation ul.root.ms-core-listMenu-root.static a:nth-last-child(1) {
    border: 0 ;
}

but it's set border:0 to all links. How can i do this only for last one?

Answer 1

You will want to use last-child on the li instead of nth-last-child() on the a .

 #DeltaTopNavigation ul.root.ms-core-listMenu-root.static a { vertical-align: middle !important; padding: 0 35px; border-right: 1px #dadada solid; } #DeltaTopNavigation ul.root.ms-core-listMenu-root.static li ul.static li:last-child a { border: 0; } 

 <div id="DeltaTopNavigation" class="ms-core-navigation" role="navigation"> <div class=" noindex ms-core-listMenu-horizontalBox"> <ul class="root ms-core-listMenu-root static"> <li class="static"> <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/" accesskey="1"></a> <ul class="static"> <li class="static selected"> <a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="/AboutPGTU"></a> </li> <li class="static"> <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Docs"></a> </li> <li class="static"> <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Services"></a> </li> <li class="static"> <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Ratings"></a> </li> </ul> </li> </ul> </div> 

Answer 2

This should work:

#DeltaTopNavigation ul.root.ms-core-listMenu-root.static li:last-child a {
    border: 0;
 }

You need to add the :last-child to the li as currently its selecting the last a tag within all the li's. So setting it to the li will mean its selecting the a tag within the last li.

Here is a link for more info