ASP Alternating CSS Issue - asp.net

Question

Currently I have 4 spans with alternating CSS tags.
<% var index =0 ; %>
<% foreach (var item in Model.Take(4)) {
var css = (index%2==0)?"even":"odd";
%>
<span class="featured-products <%= css %>">
<%= Html.Photo(PhotoExtensions.PhotoSizeType.HomepageThumb, item.DefaultPhoto)%>
<%= item.ProductName%>
</span>
<%
index ++ ;
} %>
But I need for the last span to contain an extra CSS tag "last". Ive tried a couple of different methods but they all failed. Any help? Thanks.

Answer 1

Have you tried using the :last-child CSS selector? It may not be necessary to add additional markup if you can achieve what you want through CSS.

Answer 2

If you don't want to use CSS.
<% var index = 0; %>
<% var items = Model.Take(4); %>
<% foreach (var item in items) {
var css = (index%2==0)?"":"odd";
if(index == items.Count - 1)
{
css = " last";
}
%>
<span class="featured-products <%= css %>">
<%= Html.Photo(PhotoExtensions.PhotoSizeType.HomepageThumb, item.DefaultPhoto)%>
<%= item.ProductName%>
</span>
<%
index ++ ;
} %>
Also, I would recommend cleaning this code up. You don't need to put <% and %> everywhere.
Update: A bit cleaner way of writing what you're doing. Definately not the cleanest but a good start.
<%
var index = 0;
var items = Model.Take(4);
foreach (var item in items) {
var css = (index%2==0)?"":"odd";
if(index == items.Count - 1)
{
css = " last";
}
%>
<span class="featured-products <%= css %>">
<%= Html.Photo(PhotoExtensions.PhotoSizeType.HomepageThumb, item.DefaultPhoto)%>
<%= item.ProductName%>
</span>
<%
index ++ ;
}
%>