October 07, 2010
Add CSS Class to Last Item in Navigation List This post is outdated
Is there a way to add a CSS class to the last item in the dynamic list output? I'm looking for a way to be able to target just the last item without loosing the ability of the shop owner being able to add new nav items without having to redeploy the template each time.
This is what Shopify uses by default:
<div id="navigation">
<ul id="navigate">
<li><a href="/cart">View Cart</a></li>
{% for link in linklists.main-menu.links reversed %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
Thanks guys!
Posts:
Funny enough, I just had to do this last night for my new theme. The following should work for you:
<div id="navigation"> <ul id="navigate"> <li><a href="/cart">View Cart</a></li> {% for link in linklists.main-menu.links reversed %} <li{% if forloop.last %} class="lastitem"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul> </div>Posts:
You can also target, and style accordingly, the last element of a list strictly through CSS with:
Posts:
Unfortunately there is no ie support for this suedo selector until version 9. I would stick to a class still. :(
IE sucks, long live FF, Chrome, Opera, Safari, Flock etc etc etc.
Posts:
http://www.quirksmode.org/css/contents.html#t35
Posts:
Yeah, it's pretty much a given that something is not going to work in IE! Really wish they'd get their act together already.
Thanks Jamie!
Posts:
Thanks Matthew, that worked perfectly!