change alternate row font color

Question

I tried tr:nth element ... not working

Below is my jsp and css jsp fetches 2 lists from java class Includes a validation if list is empty and then displays values data-grid is table class

<table class="data-grid" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th colspan="6">Excesses to be actioned</th>
                </tr>
            </thead>
            <tr class="header">
                <th>Excess ID</th>
                <th>Date</th>
                <th>Client</th>
                <th>Product</th>
                <th>Amount</th>
                <th>DA</th>
            </tr>
            <tbody id="tbNa">
                <c:choose>
                    <c:when
                        test="${empty actionBean.excessList.newActiveCustomerExcessUIList}">
                        <tr>
                            <td colspan="6" align="center"><font color="red">No
                                    data available for Active Excess List</font></td>
                        </tr>
                    </c:when>
                    <c:otherwise>
                        <c:forEach
                            items="${actionBean.excessList.newActiveCustomerExcessUIList}"
                            var="customerExcess" varStatus="loop">
                            <c:set var="clientName" value="${customerExcess.clientName}"
                                scope="page"></c:set>
                            <c:set var="ultimateParent"
                                value="${customerExcess.ultimateParent}" scope="page"></c:set>
                            <c:set var="cif" value="${customerExcess.cif}" scope="page"></c:set>
                            <c:forEach items="${customerExcess.excessList}" var="excess">
                                <tr>
                                    <td><c:out value="${excess.excessId }"></c:out></td>
                                    <td><c:out value="${excess.openDate }"></c:out></td>
                                    <td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
                                                value="${clientName}"></c:out></a></td>
                                    <td><c:out value="${ultimateParent}"></c:out></td>
                                    <td><c:out value="${excess.excessAmount }"></c:out></td>
                                    <td><c:out value="${excess.excessDa}"></c:out></td>
                                </tr>
                            </c:forEach>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
                <c:choose>
                    <c:when
                        test="${empty actionBean.excessList.approvedCustomerExcessUIList}">
                        <tr>
                            <td colspan="6" align="center"><font color="red">No
                                    data available for Approved Excess List</font></td>
                        </tr>
                    </c:when>
                    <c:otherwise>
                        <c:forEach
                            items="${actionBean.excessList.approvedCustomerExcessUIList}"
                            var="customerExcess">
                            <c:set var="clientName" value="${customerExcess.clientName}"
                                scope="page"></c:set>
                            <c:set var="ultimateParent"
                                value="${customerExcess.ultimateParent}" scope="page"></c:set>
                            <c:forEach items="${customerExcess.excessList}" var="excess">
                                <tr>
                                    <td><c:out value="${excess.excessId }"></c:out></td>
                                    <td><c:out value="${excess.openDate }"></c:out></td>
                                    <td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
                                                value="${clientName}"></c:out></a></td>
                                    <td><c:out value="${ultimateParent}"></c:out></td>
                                    <td><c:out value="${excess.excessAmount }"></c:out></td>
                                    <td><c:out value="${excess.excessDa }"></c:out></td>
                                </tr>
                            </c:forEach>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
            </tbody>
        </table>

Data-grid is table class...below is the css written for the table I don't want to change row color..I need to change font color of the data in the even rows

.data-grid {
    margin: 0px;
    padding: 0px;
    width : 60%;
    height : 40%;
    padding-top: 10%;   
    padding-left: 15%;
    white-space: nowrap;    
}

.data-grid select {
    padding: 3px 0px;
    border: 1px solid #DCDCDC;
}

.data-grid td {
    font-size: 11px;
    color: #000000;
    background-color: white;
    border: 0px;
    border-left: 1px;
    border-bottom: 1px;
    border-style: solid;
    border-color: #DBE5F1;
    padding: 5px;
}


.data-grid thead {
    color: #004080;
    font-size: 12px;
    font-weight: normal;
    border-color: #FFF;
    vertical-align: text-top;
    background-color: #C3C3C3;
    height: 20px;
    padding: 2px 5px;
}

.data-grid .header th {
    color: #002577;
    font-size: 11px;
    font-weight: bold;
    border-color: #FFF;
    text-align: center;
    vertical-align: text-top;
    background-color: #D5E0E6;
}

Answer 1

tr:nth-child(even) {background-color: #f2f2f2;color:red}

tr:nth-child(odd) {background-color: #f2f2f2;color:blue}

Here is the JSFiddle

Answer 2

Check this example

<!DOCTYPE html>
<html>
<head>
<style> 
.myclass1 tr:nth-child(odd)
{
background:#ff0000;
}
.myclass1 tr:nth-child(even)
{
background:#0000ff;
}
.myclass2 tr:nth-child(odd)
{
background:#00ff00;
}
.myclass2 tr:nth-child(even)
{
background:#ff0000;
}
</style>
</head>
<body>

<table width="100%" border=1 class="myclass1">

<tr><td>aaaa</td></tr>
<tr><td>bbbb</td></tr>
<tr><td>cccc</td></tr>
<tr><td>dddd</td></tr>

</table>

<table width="100%" border=1 class="myclass2">

<tr><td>aaaa</td></tr>
<tr><td>bbbb</td></tr>
<tr><td>cccc</td></tr>
<tr><td>dddd</td></tr>

</table>

</body>
</html>

Answer 3

 .data-grid  tr:nth-child(even) {color: #CCC}
 .data-grid  tr:nth-child(odd) {color: #FFF}