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