Reputation: 3
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?
Upvotes: 0
Views: 189
Reputation: 43
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
Upvotes: 0
Reputation: 20935
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>
Upvotes: 3