Stylize only input text fields of table rows with differrent colours

Question

I would like to stylize every row input text field with different colour per row, following the schema of :odd :even pseudo classes. The problem is that the nth-of-child(N) doesn't provide me the correct result. It rather make all input field with the same colour. Please advise!

 input[type=text]:nth-last-child(even){
width:150px;
display:block;
background:#ccc;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input[type=text]:nth-last-child(odd){
width:150px;
display:block;
background:#0F9;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

AND THE HTML CODE :

<form name="form1" method="post" action="" >
<table width="500" border="0" cellspacing="1" cellpadding="0">


<?php while ($rows = mysql_fetch_array($result)) : ?>

<tr>
    <td align="center">
        <?php
            $id[] = $rows['id'];
            echo $rows['id'];
        ?>
        <input type="hidden" name="id[]" value="<?php echo $rows['id']; ?>" />
    </td>
    <td align="center">
        <input name="name[]" type="text" id="name"  value="<?php echo $rows['name']; ?>" />
    </td>
    <td align="center"> 
        <input name="lastname[]" type="text" id="lastname" value="<?php echo $rows['lastname']; ?>" />
    </td>
    <td align="center">
        <input name="email[]" type="text" id="email" value="<?php echo $rows['email']; ?>" />
    </td>
</tr>

<?php endwhile; ?>

<tr>
<td colspan="4" align="center"><input type="submit" name="submit1" value="ΕΝΗΜΕΡΩΣΗ"></td>
</tr>

</table>
</td>
</tr>

</table>
</form>

Answer 1

Set the :nth-child(even) on the <td>, not on your <input>. In your code the <input> is always the first child because it is wrapped inside a <td>.

Example:

td:nth-last-child(even) input[type=text]{
   background:#ccc;
}

Fiddle: http://jsfiddle.net/sfpK8/3/

Answer 2

Your inputs are placed in a <td>, so input[type=text]:nth-last-child(even) triggers just once on a one input. Do it in that way:

td:nth-child(even) input[type=text] {
   //your styles for even
}

Also you don't have to apply styles to odd elements, just make default styles for all inputs, and then add styles for even:

input[type=text] {
   //style#1
}
td:nth-child(even) input[type=text] {
   //style#2
}