WebForms repeater, set CSS class depends on item index - asp.net

Question

I'm new with WebForms.
Now I'm using Repeater to display item from List collection.
The problem that I need to change css class depends on evenness of item.
My repeater code:
<asp:Repeater runat="server" ID="rptItems">
<ItemTemplate>
<div class="not-even">
<%# Eval("Title") %>
</div>
<ItemTemplate>
</asp:Repeater>
And what I want:
<div class="not-even">
Item 1
</div>
<div class="even">
Item 2
</div>
<div class="even">
Item 3
</div>
<div class="even">
Item 4
</div>
How can I set CSS class depends on evennes of item using repeater?

Answer 1

You can use a ternary operator for that. Check the ItemIndex and set the correct class.
<asp:Repeater ID="rptItems" runat="server">
<ItemTemplate>
<div class="<%# Container.ItemIndex %2 == 1 ? "even" : "not-even" %>">
Item <%# Container.ItemIndex + 1 %>
</div>
</ItemTemplate>
</asp:Repeater>

Answer 2

The obvious solution is AlternatingItemTemplate which is designed for exactly this.
<asp:Repeater runat="server" ID="rptItems">
<ItemTemplate>
<div class="not-even">
<%# Eval("Title") %>
</div>
<ItemTemplate>
<AlternatingItemTemplate>
<div class="even">
<%# Eval("Title") %>
</div>
<AlternatingItemTemplate>
</asp:Repeater>
Less obvious, but arguably simpler, is to just use CSS with :nth-child(odd) and :nth-child(even).
For example, give the repeater a base css class
<asp:Repeater runat="server" ID="rptItems" class="items">
<ItemTemplate>
<div>
<%# Eval("Title") %>
</div>
<ItemTemplate>
</asp:Repeater>
Would result in
.items :nth-child(odd)
{
color:red;
}
.items :nth-child(even)
{
color:blue;
}
<div class="items">
<div>
Item 1
</div>
<div>
Item 2
</div>
<div>
Item 3
</div>
<div>
Item 4
</div>
</div>